Seçici

Question

ile birlikte $ (document) .on (olayı) düz javascript eşdeğeri jQuery olay işleyicisini salt javascript'e dönüştürmeye çalışıyorum. Orada sayfadaki belirli bir seçicinin yükler, bu nedenle bu sadece bir olay bu seçici ile belgeyi hedeflemesi ile düzenlenmiştir: selector bir dize ".one, .two, .three" olarak seçicileri listesidir

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

.

olsa jQuery olmadan bu çoğaltmak için mücadele ediyorum:

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

Ama dinleyici ziyade içinde seçilen elemanın daha document elemana sadece olduğu gibi bu, istenilen davranışı yok döküman. Bu konuda yardımcı olan var mı?

Answer 1

Sorununuz, iç içe geçmiş öğeler üzerinde çalışmadığı gibi görünüyor. Belirtilen sınıf ile bir ebeveyni iç içe geçmiş bir span eleman tıklarsanız sen sadece (event.target olan) span eleman sınıfını olup olmadığını görmek için kontrol ediyoruz çünkü

Örneğin, o zaman çalışmaz.

Bu sorunu çözmek için, aslında olayı temsilci ve event.target öğenin iki üst elemanların herhangi belirtilen sınıfı olup olmadığını görmek için kontrol edebilir: Kendi oluşturmak gerektiğinden var

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); 
     } 
    } 
});