Wie kann man einen Bestätigungsdialog anzeigen, wenn man auf einen <a>-Link klickt?

Question

Ich möchte, dass dieser Link einen JavaScript-Dialog enthält, der den Benutzer fragt: " 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 er auf "Nein" klickt, passiert nichts.

Ich weiß, wie man das in Formularen macht, indem man onclick Ausführen einer Funktion, die Folgendes zurückgibt true o false . Aber wie mache ich das mit einer <a> Link?

Answer 1

Inline-Ereignishandler

Auf die einfachste Weise können Sie die confirm() Funktion in einer Inline onclick Handler.

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

Erweiterte Ereignisbehandlung

Normalerweise würden Sie aber gerne Trennen Sie Ihr HTML und Javascript Daher schlage ich vor, dass Sie keine Inline-Ereignishandler verwenden, sondern Ihrem Link eine Klasse zuweisen und ihm einen Ereignis-Listener hinzufü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 funktioniert nur in modernen Browsern (für ältere IEs können Sie die attachEvent() , returnValue und bieten eine Implementierung für getElementsByClassName() oder eine Bibliothek wie jQuery verwenden, die bei browserübergreifenden Problemen hilft). Sie können mehr lesen über diese fortgeschrittene Methode der Ereignisbehandlung auf MDN .

jQuery

Ich möchte weit davon entfernt sein, als jQuery-Fanboy zu gelten, aber DOM-Manipulation und Ereignisbehandlung sind zwei Bereiche, in denen es am meisten bei Browserunterschieden hilft. Nur zum Spaß, hier ist, wie dies aussehen würde mit jQuery :

<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>

Answer 2

Sie können auch dies versuchen:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>

Answer 3

Ich würde vorschlagen, in-line 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 .

Die obigen Angaben wurden aktualisiert, um den Platzbedarf zu verringern, wobei die Klarheit/Funktion beibehalten wurde:

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 .

Eine etwas verspätete Aktualisierung, um die addEventListener() (wie vorgeschlagen, von bažmegakapa (in den Kommentaren unten):

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 Beispiel bindet eine Funktion an das Ereignis jedes einzelnen Links, was potenziell ziemlich verschwenderisch ist, wenn Sie die Ereignisbehandlung (unter Verwendung der Delegation) an ein Vorgängerelement binden könnten, wie z. B. das folgende:

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 den body Element, das normalerweise eine Vielzahl anderer, anklickbarer Elemente enthält, habe ich eine Zwischenfunktion verwendet ( actionToFunction ), um zu bestimmen, was mit diesem Klick geschehen soll. Wenn das angeklickte Element ein Link ist und daher eine tagName von a wird die Klick-Behandlung an den reallySure() Funktion.

Referenzen:

• addEventListener() .
• Bedingter ('ternärer') Operator .
• confirm() .
• getElementsByTagName() .
• onclick .
• if () {} .

Answer 4

<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>

Answer 5

Verwendung von PHP, HTML und JAVASCRIPT für die Eingabeaufforderung

Nur wenn jemand auf der Suche nach der Verwendung von php, html und javascript in einer einzigen Datei, die Antwort unten ist für mich arbeiten.. ich beigefügt mit der Verwendung von Bootstrap Symbol "Papierkorb" für den Link.

<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 die php Code in der Mitte ist, weil 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 modifiziert es wie in der 1. Code dann ich laufen als genau das, was ich brauche Ich hoffe, dass kann ich jemand inneed von meinem Fall helfen.