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;
}
};
}
Démo JS Fiddle .
Les éléments ci-dessus ont été mis à jour 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 JS Fiddle .
Une mise à jour quelque peu tardive, à 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 JS Fiddle .
Ce qui précède lie une fonction à l'événement de chaque lien individuel; ce qui est potentiellement très coûteux, lorsque vous pouvez lier la gestion des événements (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);
Démo JS Fiddle .
Parce que la gestion des événements est attachée à l' bodyélément, qui contient normalement une foule d'autres éléments cliquables, j'ai utilisé une fonction intérimaire ( actionToFunction) pour déterminer quoi faire avec ce clic. Si l'élément cliqué est un lien et a donc un tagNameof a, la gestion des clics est transmise à la reallySure()fonction.
Références: