Comment afficher une boîte de dialog de confirmation en cliquant sur un lien ?

Je veux que ce lien ait une boîte de dialog JavaScript qui demande à l’utilisateur « Êtes-vous sûr? Y / N ”.

Link 

Si l’utilisateur clique sur «Oui», le lien doit être chargé, si «Non», rien ne se passe.

Je sais comment faire cela dans les formulaires, en utilisant onclick exécutant une fonction qui retourne true ou false . Mais comment puis-je le faire avec un lien ?

Gestionnaire d’événements en ligne

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

 Link 

Gestion avancée des événements

Mais normalement, vous voudriez séparer votre HTML et votre Javascript , donc je vous suggère de ne pas utiliser de gestionnaires d’événements en ligne, mais de placer une classe sur votre lien et d’y append un écouteur d’événement.

 Link ...  

Cet exemple ne fonctionnera que dans les navigateurs modernes (pour les anciens IE, vous pouvez utiliser attachEvent() , returnValue et fournir une implémentation pour getElementsByClassName() ou utiliser une bibliothèque comme jQuery pour résoudre les problèmes inter-navigateurs). Vous pouvez en savoir plus sur cette méthode avancée de gestion des événements sur MDN .

jQuery

Je voudrais restr loin d'être considéré comme un fanboy de jQuery, mais la manipulation des DOM et la gestion des événements sont deux domaines dans lesquels cela aide le plus avec les différences de navigateur. Juste pour le fun, voici à quoi cela ressemblerait avec jQuery :

 Link ...   

Je suggère d’é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; } }; }​ 

JS Fiddle démo .

La mise à jour ci-dessus pour réduire l'espace, tout en maintenant 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 .

Une mise à jour un peu 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); } 

JS Fiddle démo .

Ce qui précède lie une fonction à l'événement de chaque lien individuel; ce qui peut être tout à fait inutile, lorsque vous pouvez lier le traitement des événements (en utilisant la délégation) à un élément ancêtre, tel que:

 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 .

Étant donné que la gestion des événements est attachée à l'élément body , qui contient normalement une foule d'autres éléments cliquables, j'ai utilisé une fonction provisoire ( 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, la gestion des clics est transmise à la fonction reallySure() .

Les références:

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

Vous pouvez également essayer ceci:

  Link Text  

Cette méthode est légèrement différente des réponses ci-dessus si vous joignez votre gestionnaire d’événements à l’aide de 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 attacher 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’append 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, cela devient encore plus efficace lorsque vous ajoutez cet événement au conteneur ayant toutes les balises d’ancrage.

jAplus

Vous pouvez le faire sans écrire de code JavaScript

      ... Link ...  

Page de démonstration

UTILISATION DE PHP, HTML ET JAVASCRIPT pour demander

Juste si quelqu’un cherchait à utiliser php, html et javascript dans un seul fichier, la réponse ci-dessous fonctionne pour moi .. j’ai joint à l’aide de l’icône bootstrap “trash” pour le lien.

 " onclick="return confirm('Are you sure want to delete this?');"> 

La raison pour laquelle j’ai utilisé le code PHP au milieu est que je ne peux pas l’utiliser depuis le début.

le code ci-dessous ne fonctionne pas pour moi: –

 echo ""; 

et je l’ai modifié comme dans le 1er code puis je cours comme ce dont j’ai besoin. J’espère que je peux aider quelqu’un innéed de mon cas.