Sugiro evitar o JavaScript in-line:
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;
}
};
}
Demonstração JS Fiddle .
O acima foi atualizado para reduzir o espaço, embora mantendo a clareza / função:
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?");
};
}
Demonstração JS Fiddle .
Uma atualização um pouco tardia, para usar addEventListener()
(como sugerido por bažmegakapa , nos comentários abaixo):
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);
}
Demonstração JS Fiddle .
O acima vincula uma função ao evento de cada link individual; o que é potencialmente um desperdício, quando você pode vincular a manipulação de eventos (usando delegação) a um elemento ancestral, como o seguinte:
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);
Demonstração JS Fiddle .
Como a manipulação de eventos é anexada ao body
elemento, que normalmente contém uma série de outros elementos clicáveis, usei uma função provisória ( actionToFunction
) para determinar o que fazer com esse clique. Se o elemento clicado é um link e, portanto, possui um tagName
dos a
, a manipulação de cliques é passada para a reallySure()
função.
Referências: