सादा जावास्क्रिप्ट $ (दस्तावेज़) के बराबर। (घटना) चयनकर्ता

Question

के साथ मैं एक jQuery ईवेंट हैंडलर को शुद्ध जावास्क्रिप्ट में बदलने की कोशिश कर रहा हूं। वहाँ पेज पर एक विशेष चयनकर्ता का भार है, इसलिए यह केवल एक घटना है कि चयनकर्ता के साथ लक्षित कर दस्तावेज़ के साथ डिजाइन किया गया था:

$(document).on("click", selectorString, function(event) { 
// do stuff 
}); 

कहाँ selector एक स्ट्रिंग ".one, .two, .three" के रूप में चयनकर्ताओं की एक सूची है।

मैं हालांकि jQuery के बिना इस को दोहराने के लिए संघर्ष कर रहा हूँ:

document.addEventListener("click", function(event){ 
    if (elementHasClass(event.target, selectorString) { 
     // do stuff 
    } 
}); 

लेकिन जैसे श्रोता document तत्व पर ही है, बल्कि चयनित तत्व भीतर की तुलना में इस वांछित व्यवहार नहीं है, दस्तावेज़। क्या कोई इसके लिए सहायता कर सकता है?

Answer 1

ऐसा लगता है कि आपकी समस्या यह है कि यह नेस्टेड तत्वों पर काम नहीं करता है।

उदाहरण के लिए, यदि आप एक नेस्टेड span तत्व निर्दिष्ट वर्ग के साथ एक माता पिता है उस पर क्लिक करें, तो यह है क्योंकि आप केवल अगर span तत्व (जो event.target है) वर्ग को देखने के लिए जाँच कर रहे हैं काम नहीं करता।

इसके समाधान के लिए, आप अनिवार्य रूप से घटना को सौंपने और अगर event.target तत्व के पेरेंट का तत्वों की किसी भी निर्दिष्ट वर्ग है देखने के लिए जाँच कर सकते हैं:

Example Here

document.addEventListener("click", function (e) { 
    var target = e.target; 

    while (target && target.parentNode !== document) { 
     target = target.parentNode; 
     if (!target) { return; } // If element doesn't exist 

     if (target.classList.contains('target')){ 
      // do stuff 
      console.log(e.target); 
     } 
    } 
});