La boîte de dialogue de confirmation de Javascript sur href-link?

Gestionnaire d'événements en ligne

De la manière la plus simple, vous pouvez utiliser la fonction confirm() dans un onclick ligne.

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

Gestion avancée des évènements

Mais normalement, vous souhaitez séparer votre HTML et votre Javascript , de sorte que je vous suggère de ne pas utiliser les gestionnaires d'événements en ligne, mais mettez une classe sur votre lien et ajoutez un auditeur d'événements.

 <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 IE plus anciens, vous pouvez utiliser attachEvent() , returnValue et fournir une implémentation pour getElementsByClassName() ou utiliser une bibliothèque comme jQuery qui aidera à résoudre les problèmes du navigateur). Vous pouvez en savoir plus sur cette méthode avancée de gestion des événements sur MDN .

JQuery

Je voudrais rester loin d'être considéré comme un fanboy jQuery, mais la manipulation DOM et la gestion des événements sont deux domaines où il aide le plus avec les différences de navigateur. Juste pour le plaisir, voici comment cela se passerait 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> 

Je suggérerais éviter le JavaScript en ligne:

 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; } }; }​ 

Démo de JS Fiddle .

La mise à jour ci-dessus pour réduire l'espace, tout en maintenant la clarté / la 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?"); }; } 

Démo de JS Fiddle .

Une mise à jour assez tardive, pour utiliser addEventListener() (comme 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); } 

Démo de JS Fiddle .

Ce qui précède lie une fonction à l'événement de chaque lien individuel; Qui est potentiellement assez gaspilleur, lorsque vous pouvez lier la gestion des événements (en utilisant la délégation) à un élément ancêtre, comme par exemple:

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

Démo de JS Fiddle .

Étant donné que la gestion des événements est attachée à l'élément du body , qui contient normalement une foule d'autres éléments cliquables, j'ai utilisé une fonction intérimaire ( actionToFunction ) pour déterminer ce qu'il faut faire avec ce clic. Si l'élément cliqué est un lien, et a donc un tagName de a , la gestion des clics est transmise à la fonction reallySure() .

Les références:

• addEventListener() .
• Opérateur conditionnel («ternaire») .
• confirm() .
• getElementsByTagName() .
• onclick .
• if () {} .

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

Cette méthode est légèrement différente de l'une des réponses ci-dessus si vous joignez votre gestionnaire d'événements en utilisant addEventListener (ou attachEvent).

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

Vous pouvez joindre ce gestionnaire avec soit:

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

Ou pour les anciennes versions d'Internet Explorer:

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

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

 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?' ); } }; 

Cette méthode serait plus efficace si vous aviez beaucoup de balises d'ancrage. Bien sûr, il devient encore plus efficace lorsque vous ajoutez cet événement au contenant contenant toutes les étiquettes d'ancrage.

JAplus

Vous pouvez le faire sans écrire de code JavaScript

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

Page de démonstration

UTILISATION DE PHP, HTML ET JAVASCRIPT pour inciter

Juste si quelqu'un cherchant à utiliser php, html et javascript dans un seul fichier, la réponse ci-dessous fonctionne pour moi. J'ai attaché avec l'icône bootstrap "trash" pour le lien.

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

La raison pour laquelle j'ai utilisé le code php au milieu, c'est parce que je ne peux pas l'utiliser dès le début …

Le code ci-dessous ne fonctionne pas pour moi:

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

Et je l'ai modifié comme dans le 1er code, puis je cours comme juste ce dont j'ai besoin … J'espère que je peux aider quelqu'un dans mon cas.

Vous pouvez également essayer ceci:

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