मैं सुझाव दूंगा कि इन-लाइन जावास्क्रिप्ट से बचें:
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;
}
};
}
जेएस फिडेल डेमो ।
उपरोक्त स्थान को कम करने के लिए अद्यतन किया गया है, हालांकि स्पष्टता / कार्य को बनाए रखते हुए:
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?");
};
}
जेएस फिडेल डेमो ।
कुछ हद तक अपडेट किया गया, उपयोग करने के लिए addEventListener()(जैसा कि नीचे दिए गए टिप्पणियों में bažmegakapa द्वारा सुझाया गया है):
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);
}
जेएस फिडेल डेमो ।
उपरोक्त प्रत्येक व्यक्तिगत लिंक की घटना के लिए एक फ़ंक्शन बांधता है; जो संभावित रूप से काफी बेकार है, जब आप पूर्वज तत्व के लिए ईवेंट-हैंडलिंग (प्रतिनिधिमंडल का उपयोग करके) को बांध सकते हैं, जैसे कि निम्नलिखित:
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);
जेएस फिडेल डेमो ।
क्योंकि ईवेंट-हैंडलिंग bodyतत्व से जुड़ा हुआ है , जिसमें आम तौर पर अन्य का एक होस्ट होता है, क्लिक करने योग्य, उन तत्वों को मैंने अंतरिम फ़ंक्शन ( actionToFunction) का उपयोग किया है जो यह निर्धारित करता है कि उस क्लिक के साथ क्या करना है। यदि क्लिक किया गया तत्व एक लिंक है, और इसलिए एक tagNameहै a, तो क्लिक-हैंडलिंग reallySure()फ़ंक्शन को पास किया जाता है।
संदर्भ: