Dialogue de confirmation JavaScript sur un lien href ?

Question

Je veux ce lien pour avoir une boîte de dialogue javascript qui demande à l’utilisateur « Etes-vous sûr ? O/N ».

Si l’utilisateur clique sur « Oui » le lien doit se charger, si « Non », rien ne se passera. Je sais comment faire cela dans les formes, à l’aide d’onclick exécutant une fonction qui retourne la valeur true ou false.

Mais comment faire cela avec un lien href normal ?

Answer 1

Inline gestionnaire d'événements

Dans la manière la plus simple, vous pouvez utiliser l' confirm() de la fonction inline onclick gestionnaire.

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

Avancée la gestion des événements

Mais normalement, vous souhaitez séparer votre code HTML et Javascript, donc je vous suggère de ne pas utiliser inline gestionnaires d'événements, mais mettre une classe sur votre lien et ajouter un écouteur d'événement.

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

Cet exemple ne fonctionnera que dans les navigateurs modernes (pour les anciens S vous pouvez utiliser attachEvent(), returnValue et de fournir une implémentation pour getElementsByClassName() ou utiliser une librairie comme jQuery qui va aider avec des problèmes de navigateur). Vous pouvez lire plus au sujet de cette avancée, la gestion des événements de la méthode sur MDN.

jQuery

Je tiens à rester loin d'être considérée comme un jQuery fanboy, mais de manipulation du DOM et la gestion des événements sont deux domaines où elle aide le plus avec les différences de navigateurs. Juste pour le fun, voici comment il serait regarder avec 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

Je vous conseille d'éviter, dans la ligne de JavaScript:

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 démo.

Le ci-dessus mis à jour afin de réduire l'espace, tout en conservant la clarté/fonction:

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 démo.

Un peu lent à jour, utiliser addEventListener() (comme l'a suggéré, par bažmegakapa, dans les commentaires ci-dessous):

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 démo.

Le ci-dessus se lie d'une fonction à l'événement de chaque lien, ce qui est potentiellement très coûteuses lorsque vous pouvez lier la gestion des événements (par délégation) à un élément ancêtre, telles que les suivantes:

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 démo.

Parce que la gestion des événements est attaché à l' body élément, qui contient normalement une foule d'autres, cliquable, les éléments que j'ai utilisé un intermédiaire de la fonction (actionToFunction) de déterminer quoi faire avec cela, cliquez sur. Si l'élément est cliqué un lien, et, par conséquent, tagName de a, le click-la manipulation est passé à l' reallySure() fonction.

Références:

• addEventListener().
• Conditionnel ('expression') de l'opérateur.
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

Answer 3

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

Answer 4

Cette méthode est légèrement différente qu’une des réponses ci-dessus, si vous attachez votre gestionnaire d’événements à l’aide de la méthode addEventListener (ou attachEvent).

Vous pouvez joindre ce gestionnaire avec soit :

Ou pour les anciennes versions d’internet explorer :

Answer 5

Juste pour le fun, je vais utiliser un événement unique sur l’ensemble du document au lieu d’ajouter un événement à toutes les balises d’ancrage :

Cette méthode serait plus efficace si vous aviez plusieurs balises d’ancrage. Bien entendu, il devient encore plus efficace lorsque vous ajoutez cet événement au conteneur ayant toutes les balises d’ancrage.