web-dev-qa-db-fra.com

Ajout d'un événement de clic via addEventListener pour confirmer la navigation à partir d'un lien hypertexte

J'écris du code JavaScript que je veux essentiellement confirmer quand un utilisateur clique sur un lien qu'il veut réellement cliquer dessus.

Mon code ressemble actuellement à ceci:

var Anchors = document.getElementsByTagName("a");

for (var i = 0; i < Anchors.length ; i++)
{
    Anchors[i].addEventListener("click", function () { return confirm('Are you sure?'); }, false);
}

Ce code affiche la zone de confirmation telle que je l’attendrais, mais navigue ensuite vers le lien quel que soit le bouton enfoncé dans la zone de confirmation.

Je pense que le problème est lié à mon utilisation de la addEventListener (ou à une limitation de son implémentation) car si j'ajoute manuellement ce qui suit dans un fichier HTML, le comportement est exactement ce à quoi je m'attendais:

<a href="http://www.google.com" onclick="return confirm('Are you sure?')">Google</a><br />
javascriptjavascript-eventshyperlinkaddeventlistener
12
Andy

J'ai changé votre fonction onclick pour inclure un appel à event.preventDefault() et cela a semblé le faire fonctionner:

var Anchors = document.getElementsByTagName("a");

for (var i = 0; i < Anchors.length ; i++) {
    Anchors[i].addEventListener("click", 
        function (event) {
            event.preventDefault();
            if (confirm('Are you sure?')) {
                window.location = this.href;
            }
        }, 
        false);
}

(Voir http://jsfiddle.net/ianoxley/vUP3G/1/ )

35
Ian Oxley

Vous devez empêcher l'exécution du gestionnaire d'événements par défaut.

Voir Comment utiliser la méthode addEventListener () de Javascript pour remplacer le comportement submit () par défaut d'un formulaire HTML

--MODIFIER--

Nous avons vu que vous avez répondu vous-même pendant que j'éditais la réponse.

1
Toni Toni Chopper

 Solution tirée de la question sur l'affiche originale

Après quelques recherches supplémentaires, j'ai trouvé la réponse ici sur Stack Overflow: Renvoyer false depuis le gestionnaire de clics ne fonctionne pas dans Firefox

Si quelqu'un trouve cette question à la place de l'autre, lorsque vous utilisez la méthode addEventListener de câblage d'événements, vous ne pouvez pas simplement utiliser return false; pour annuler l'action, vous devez plutôt utiliser la méthode preventDefault() de l'événement. Le code ci-dessus est donc devenu:

Anchors[i].addEventListener("click", function (event) { 
    if (!confirm('Are you sure?')) { event.preventDefault(); } 
}, false);
0
brasofilo