wake-up-neo.net

Wie wird ein Bestätigungsdialogfeld angezeigt, wenn auf einen <a> -Link geklickt wird?

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" nichts passiert.

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

212
Christoffer

Inline-Event-Handler

Am einfachsten können Sie die Funktion confirm() in einem Inline-onclick-Handler verwenden.

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

Erweiterte Ereignisbehandlung

Normalerweise möchten Sie HTML und Javascript voneinander trennen . Ich schlage daher vor, dass Sie keine Inline-Event-Handler verwenden, sondern eine Klasse in Ihren Link einfügen und einen Event-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 attachEvent(), returnValue verwenden und eine Implementierung für getElementsByClassName() bereitstellen oder eine Bibliothek wie jQuery verwenden, die bei browserübergreifenden Problemen hilft). Weitere Informationen zu dieser erweiterten Ereignisbehandlungsmethode finden Sie unter MDN .

jQuery

Ich würde mich gerne von jQuery-Fanatiken fernhalten, aber DOM-Manipulation und Ereignisbehandlung sind zwei Bereiche, in denen es bei Browser-Unterschieden am meisten hilft. Nur zum Spaß, so würde dies 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>
489
kapa
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
13
coder

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 obige wurde aktualisiert, um Platz zu sparen, wobei die Übersichtlichkeit/Funktion erhalten bleibt:

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 zur Verwendung von 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 jedes einzelnen Links. Das ist möglicherweise ziemlich verschwenderisch, wenn Sie die Ereignisbehandlung (mithilfe von Delegierung) an ein Vorfahrenelement binden können, z. B. Folgendes:

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 Element body angehängt ist, das normalerweise einen Host mit anderen anklickbaren Elementen enthält, habe ich eine Zwischenfunktion (actionToFunction) verwendet, um zu bestimmen, was mit diesem Klick zu tun ist. Wenn es sich bei dem angeklickten Element um eine Verknüpfung handelt und daher eine tagName von a hat, wird die Klickbehandlung an die Funktion reallySure() übergeben.

Verweise:

13
David Thomas

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

jAplus

Sie können es 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>

Demo-Seite

0
erik

PHP, HTML UND JAVASCRIPT zur Eingabeaufforderung verwenden

Nur wenn jemand auf der Suche nach php, html und javascript in einer einzigen Datei ist, funktioniert die Antwort unten für mich.

<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 der, dass ich ihn nicht von Anfang an verwenden kann. 

der Code unten funktioniert nicht für mich: -

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 ersten Code geändert, dann laufe ich als genau das, was ich brauche .. Ich hoffe, dass ich jemandem helfen kann, der meinem Fall nicht vertraut ist.

0
Shah Abd Hafiz

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 verknüpfen:

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

Oder für ältere Versionen des Internet Explorers:

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);
0

Zum Spaß werde ich ein einzelnes Ereignis für das gesamte Dokument verwenden, anstatt ein Ereignis zu all den Ankertags 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. Es wird natürlich noch effizienter, wenn Sie dieses Ereignis dem Container mit allen Ankertags hinzufügen.

0