Wie wird ein Bestätigungsdialog angezeigt, wenn Sie auf einen <a> -Link klicken?

268

Ich möchte, dass dieser Link ein JavaScript-Dialogfeld enthält, in dem der Benutzer gefragt wird: „ Sind Sie sicher? J / N ”.

<a href="delete.php?id=22">Link</a>

Wenn der Benutzer auf "Ja" klickt, sollte der Link geladen werden, wenn "Nein", passiert nichts.

Ich weiß, wie man das in Formularen macht, indem onclickman eine Funktion ausführt, die trueoder zurückgibt false. Aber wie mache ich das mit einem <a>Link?

Christoffer
quelle
Wie wir dies erreichen können anglejs1.x
Bhaskara Arani

Antworten:

595

Inline-Event-Handler

Auf einfachste Weise können Sie die confirm()Funktion in einem Inline- onclickHandler verwenden.

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>

Erweiterte Ereignisbehandlung

Normalerweise möchten Sie jedoch HTML und Javascript trennen. Ich empfehle daher, keine Inline-Ereignishandler zu verwenden, sondern eine Klasse in Ihren Link einzufügen und einen Ereignis-Listener hinzuzufügen.

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
    var elems = document.getElementsByClassName('confirmation');
    var confirmIt = function (e) {
        if (!confirm('Are you sure?')) e.preventDefault();
    };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
</script>

Dieses Beispiel wird in modernen Browsern nur Arbeit (für ältere IEs können Sie verwenden attachEvent(), returnValueund für eine Implementierung zur Verfügung stellen getElementsByClassName()oder eine Bibliothek wie jQuery verwenden , die mit Cross-Browser - Problemen helfen). Weitere Informationen zu dieser erweiterten Ereignisbehandlungsmethode finden Sie in MDN .

jQuery

Ich würde gerne weit davon entfernt sein, als jQuery-Fanboy betrachtet zu werden, aber DOM-Manipulation und Ereignisbehandlung sind zwei Bereiche, in denen es bei Browserunterschieden am meisten hilft. Nur zum Spaß, so würde das mit jQuery aussehen :

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Are you sure?');
    });
</script>
Kapa
quelle
War es wirklich so einfach? Schäme ich mich oder was? Ich habe nur angenommen, dass das nur bei Formularen funktioniert. Funktioniert der Bestätigungsdialog für jedes anklickbare Element?
Christoffer
1
@Tophe Der Bestätigungsdialog selbst hat nichts mit bestimmten Elementen zu tun.
Kapa
1
Ist es für so etwas Einfaches wirklich notwendig, HTML und JavaScript zu trennen? Welche Probleme würden Sie vorhersehen, wenn Sie eine so einfache und kurze Funktion inline lassen würden?
Ciaran Gallagher
5
@CiaranG Es beginnt immer so :), dann fügen Sie dies und das usw. hinzu. Wenn Sie es schaffen, die Trennung von Bedenken zu akzeptieren, werden Sie sich sauberer fühlen, wenn Sie die meisten dieser Inline-Handler loswerden. Sie haben einfach nichts mit Ihrem HTML zu tun. Zumindest meiner Meinung nach und zumindest in den meisten Fällen. Es gibt immer besondere Umstände - Faulheit sollte keine davon sein.
Kapa
@Ulysnep Laut Ihrem Bearbeitungsvorschlag ist beim Weglassen des Semikolons confirm(…)im Inline-Handler ein Fehler aufgetreten . Das konnte ich nicht reproduzieren.
user4642212
15

Ich würde vorschlagen, Inline-JavaScript zu vermeiden:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        var check = confirm("Are you sure you want to leave?");
        if (check == true) {
            return true;
        }
        else {
            return false;
        }
    };
}​

JS Fiddle Demo .

Das oben Gesagte wurde aktualisiert, um Platz zu sparen, obwohl Klarheit / Funktion erhalten bleiben:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        return confirm("Are you sure you want to leave?");
    };
}

JS Fiddle Demo .

Ein etwas verspätetes Update, das verwendet werden kann addEventListener()(wie von bažmegakapa in den Kommentaren unten vorgeschlagen):

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].addEventListener('click', reallySure);
}

JS Fiddle Demo .

Das Obige bindet eine Funktion an das Ereignis jeder einzelnen Verbindung; Dies ist möglicherweise ziemlich verschwenderisch, wenn Sie die Ereignisbehandlung (mithilfe der Delegierung) an ein Vorgängerelement wie das folgende binden können:

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}

function actionToFunction (event) {
    switch (event.target.tagName.toLowerCase()) {
        case 'a' :
            reallySure(event);
            break;
        default:
            break;
    }
}

document.body.addEventListener('click', actionToFunction);

JS Fiddle Demo .

Da die Ereignisbehandlung an das bodyElement angehängt ist, das normalerweise eine Vielzahl anderer anklickbarer Elemente enthält, habe ich eine Zwischenfunktion ( actionToFunction) verwendet, um zu bestimmen, was mit diesem Klick geschehen soll. Wenn das angeklickte Element ein Link ist und daher ein tagNamevon hat a, wird die Klickbehandlung an die reallySure()Funktion übergeben.

Verweise:

David sagt, Monica wieder einsetzen
quelle
Danke dir. Die kurze Inline-Bestätigungslösung hat funktioniert. Warum schlagen Sie vor, Inline-Code zu vermeiden? Normalerweise halte ich mich aus offensichtlichen Gründen von Inline-CSS fern, aber was sind die Gründe für kurze Javascript-Schnipsel?
Christoffer
Aus genau dem gleichen Grund, aus dem Inline-CSS nicht empfohlen wird, ist es schwieriger zu warten, führt zu unübersichtlichem HTML und erfordert einen übermäßigen Arbeitsaufwand für die Aktualisierung, wenn sich die Anforderungen ändern.
David sagt, Monica
Ich stimme dem Punkt zu, keine Inline-Handler zu verwenden. Wenn wir unsere Handler jedoch trotzdem im Skript anhängen, sollte das erweiterte Modell verwendet werden ( addEventListener). +1 obwohl.
Kapa
@ bažmegakapa: Ich ... stimme eher zu; aber ich muss gestehen, dass ich mich noch nicht mit dem addEventListener()Modell vertraut gemacht habe .
David sagt, Monica
Sie können ersetzen if(check == true)mit if(check).
Anonym
14
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
Codierer
quelle
5

Sie können dies auch versuchen:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>
Wolfack
quelle
Die Antwort von @kapa ist sehr einfach und weniger chaotisch
dipenparmar12
1

jAplus

Sie können dies tun, ohne JavaScript-Code zu schreiben

<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
   <a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>

Demoseite

erik
quelle
11
Vielen Dank für das Teilen, aber natürlich verwenden Sie Javascript. Sie fügen eine ganze Bibliothek hinzu, um etwas sehr Einfaches zu erledigen. Lohnt es sich? Ich kenne diese Bibliothek nicht, ich werde darüber lesen, wenn Sie sie auch für andere Zwecke verwenden, ist es vielleicht die zusätzliche Ladung wert ...
Marcos Buarque
1
Zwei Bibliotheken für diese einfache Sache?
Maracuja-Saft
0

Diese Methode unterscheidet sich geringfügig von den oben genannten Antworten, wenn Sie Ihren Ereignishandler mit addEventListener (oder attachEvent) anhängen.

function myClickHandler(evt) {
  var allowLink = confirm('Continue with link?');
  if (!allowLink) {
    evt.returnValue = false; //for older Internet Explorer
    if (evt.preventDefault) {
      evt.preventDefault();
    }
    return false;
  }
}

Sie können diesen Handler mit folgenden Optionen anhängen:

document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);

Oder für ältere Versionen des Internet Explorers:

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);
Chad Killingsworth
quelle
Wenn Sie sich um alte IEs kümmern, vergessen Sie nicht window.event.
Kapa
0

Nur zum Spaß werde ich ein einzelnes Ereignis für das gesamte Dokument verwenden, anstatt allen Ankertags ein Ereignis hinzuzufügen :

document.body.onclick = function( e ) {
    // Cross-browser handling
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // If the element clicked is an anchor
    if ( target.nodeName === 'A' ) {

        // Add the confirm box
        return confirm( 'Are you sure?' );
    }
};

Diese Methode wäre effizienter, wenn Sie viele Ankertags hätten. Natürlich wird es noch effizienter, wenn Sie dieses Ereignis dem Container mit allen Ankertags hinzufügen.

Florian Margaine
quelle
0

Die meisten Browser zeigen die an übergebene benutzerdefinierte Nachricht nicht an confirm().

Mit dieser Methode können Sie ein Popup mit einer benutzerdefinierten Nachricht anzeigen, wenn Ihr Benutzer den Wert eines <input>Felds geändert hat .

Sie können dies nur auf einige Links oder sogar andere HTML-Elemente auf Ihrer Seite anwenden . Fügen Sie einfach eine benutzerdefinierte Klasse zu allen Links hinzu, die bestätigt werden müssen, und wenden Sie den folgenden Code an:

$(document).ready(function() {
  let unsaved = false;
  // detect changes in all input fields and set the 'unsaved' flag
  $(":input").change(() => unsaved = true);
  // trigger popup on click
  $('.dangerous-link').click(function() {
    if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) {
      return; // user didn't confirm
    }
    // either there are no unsaved changes or the user confirmed
    window.location.href = $(this).data('destination');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" placeholder="Nuclear code here" />
<a data-destination="https://en.wikipedia.org/wiki/Boom" class="dangerous-link">
    Launch nuke!
</a>

Versuchen Sie, den Eingabewert im Beispiel zu ändern, um eine Vorschau der Funktionsweise zu erhalten.

Salvioner
quelle
-2

VERWENDUNG VON PHP, HTML UND JAVASCRIPT zur Eingabeaufforderung

Nur wenn jemand nach PHP, HTML und Javascript in einer einzigen Datei sucht , funktioniert die Antwort unten für mich. Ich habe mit dem verwendeten Bootstrap-Symbol "Papierkorb" für den Link angehängt.

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

Der Grund, warum ich PHP- Code in der Mitte verwendet habe, ist, dass ich ihn nicht von Anfang an verwenden kann.

Der folgende Code funktioniert bei mir nicht: -

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

und ich habe es wie im 1. Code geändert, dann laufe ich genau so, wie ich es brauche. Ich hoffe, dass ich jemandem helfen kann, der meinen Fall nicht braucht.

Shah Abd Hafiz
quelle