Suggerirei di evitare JavaScript in linea:
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;
}
};
}
Demo di JS Fiddle .
Quanto sopra aggiornato per ridurre lo spazio, pur mantenendo chiarezza / funzione:
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?");
};
}
Demo di JS Fiddle .
Un aggiornamento un po 'tardivo, da usare addEventListener()
(come suggerito da Bažmegakapa , nei commenti qui sotto):
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);
}
Demo di JS Fiddle .
Quanto sopra associa una funzione all'evento di ogni singolo collegamento; che è potenzialmente piuttosto dispendioso, quando è possibile associare la gestione degli eventi (utilizzando la delega) a un elemento antenato, come il seguente:
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);
Demo di JS Fiddle .
Poiché la gestione degli eventi è collegata body
all'elemento, che normalmente contiene una miriade di altri elementi cliccabili, ho usato una funzione temporanea ( actionToFunction
) per determinare cosa fare con quel clic. Se l'elemento su cui si fa clic è un collegamento e pertanto presenta un tagName
of a
, la gestione dei clic viene passata alla reallySure()
funzione.
Riferimenti: