Comment afficher une boîte de dialogue de confirmation en cliquant sur un lien?
je veux que ce lien ait un dialogue JavaScript qui demande à l'utilisateur " êtes-vous sûr? Y / N ".
<a href="delete.php?id=22">Link</a>
si l'utilisateur clique" Oui", le lien devrait se charger, si" non " rien ne se produira.
je sais comment faire cela dans les formulaires, en utilisant onclick
qui exécute une fonction qui retourne true
ou false
. Mais comment faire avec un lien <a>
?
8 réponses
Inline gestionnaire d'événement
de la manière la plus simple, vous pouvez utiliser la fonction confirm()
dans un gestionnaire en ligne onclick
.
<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>
"151980920 Avancée" gestion des événements
mais normalement vous aimeriez séparer votre HTML et Javascript , donc je suggère que vous n'utilisez pas de gestionnaires d'événements en ligne, mais mettez une classe sur votre lien et ajoutez un écouteur d'événements à elle.
<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 systèmes plus anciens, vous pouvez utiliser attachEvent()
, returnValue
et fournir une implémentation pour getElementsByClassName()
ou utiliser une bibliothèque comme jQuery qui vous aidera avec les problèmes entre navigateurs). Vous pouvez en savoir plus sur cette méthode avancée de gestion d'événements sur MDN .
jQuery
j'aimerais rester loin d'être considéré comme un fanboy jQuery, mais la manipulation de DOM et la gestion d'événements sont deux domaines où il aide le plus avec les différences de navigateur. Juste pour le plaisir, voici à quoi cela ressemblerait 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>
<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>
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;
}
};
}
ci-dessus mis à jour afin de réduire l'espace, tout en conservant la clarté/de 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?");
};
}
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);
}
la fonction ci-dessus lie une fonction à l'événement de chaque lien individuel; ce qui est potentiellement très dispendieux, quand vous pourriez lier le traitement d'événement (en utilisant la délégation) à un élément ancêtre, tel que le suivant:
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);
parce que la gestion de l'événement est body
élément, qui contient normalement un hôte 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 manipulation de clic est passée à la fonction reallySure()
.
, les Références:
vous pouvez aussi essayer ceci:
<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
Link Text
</a>
cette méthode est légèrement différente de l'une ou l'autre des réponses ci-dessus si vous attachez 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 attacher ce handler avec l'un ou l'autre:
document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);
ou pour les versions plus anciennes 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 à tous les tags 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 de nombreuses étiquettes d'ancrage. Bien sûr, il devient encore plus efficace lorsque vous ajoutez cet événement au conteneur ayant toutes les étiquettes d'ancrage.
jAplus
vous pouvez le faire, sans écrire le 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>
utilisant PHP, HTML et JAVASCRIPT pour la sollicitation
juste si quelqu'un cherche à utiliser php, html et javascript dans un seul fichier, la réponse ci-dessous fonctionne pour moi.. je l'ai attaché avec l'utilisation de bootstrap icône "corbeille" 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é php code au milieu 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 ce dont j'ai besoin.. J'espère que je peux aider quelqu'un inneed de mon cas.