Tôi khuyên bạn nên tránh JavaScript nội tuyến:
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;
}
};
}
Bản demo của Fiddle JS .
Các cập nhật ở trên để giảm không gian, mặc dù duy trì sự rõ ràng / chức năng:
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?");
};
}
Bản demo của Fiddle JS .
Một bản cập nhật hơi muộn, để sử dụng addEventListener()(như được đề xuất, bởi bažmegakapa , trong các bình luận bên dưới):
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);
}
Bản demo của Fiddle JS .
Ở trên liên kết một chức năng với sự kiện của từng liên kết riêng lẻ; Điều này có khả năng khá lãng phí, khi bạn có thể liên kết xử lý sự kiện (sử dụng ủy quyền) với một yếu tố tổ tiên, chẳng hạn như sau:
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);
Bản demo của Fiddle JS .
Bởi vì xử lý sự kiện được gắn vào bodyphần tử, thường chứa một loạt các phần tử khác, có thể nhấp, nên tôi đã sử dụng hàm tạm thời ( actionToFunction) để xác định phải làm gì với nhấp chuột đó. Nếu phần tử được nhấp là một liên kết và do đó có một tagNamephần a, việc xử lý nhấp được truyền cho reallySure()hàm.
Người giới thiệu: