Javascript 具有未知選擇器和子項的事件委托

Question

我有一個動態選擇器（linkTrigger），它應該捕獲對元素的點擊。 我不知道 linkTrigger 可能是什么，也不知道它是否會有一些孩子。 當我使用 jQuery 時一切都很好。

如果您單擊第一個綠色矩形（不是數字部分），您將看到所有 3 個處理程序都按預期工作，但如果您單擊第一個綠色矩形中的數字，則只有 jQuery 和 javascript2 處理程序在工作，再次按預期進行，因為單擊on span in green box 不滿足以下條件：

if (e.target.classList.contains(linkTrigger.substring(1))) {

我不能對我不想被點擊的孩子使用css point-events none因為我不知道linkTrigger是什么，我也不想弄亂它的內容。

問題是 javascript2 處理程序不是動態的，這意味着我必須將此處理程序添加到我稍后在 dom 中添加的每個新“.a”框中。

這一切有更好的解決方案嗎？

 var linkTrigger = '.c' //jquery works fine and its live $('.wrap').on('click', linkTrigger, function(e) { var parent = $(this).closest('.a'), id = parent.attr('data-id') console.log('jquery: ' + id) }) //javscript works but not if we click on child (number span inside green rectangle) and its live. I cant use **css point-events none** on children I dont want to be clicked because I dont knwo what **linkTrigger** is, neither I want to mess with its contents. document.querySelector('.wrap').addEventListener('click', function(e){ if (e.target.classList.contains(linkTrigger.substring(1))) { var parent = e.target.closest('.a'), id = parent.getAttribute('data-id') console.log('js: ' + id) } }) //javscript2 works but its not live, meaning if I add more ".a" containers I have to attach this function call to each item. document.querySelectorAll(linkTrigger).forEach(function(el){ el.addEventListener('click', function(e){ var parent = e.target.closest('.a'), id = parent.getAttribute('data-id') console.log('js2: ' + id) }) })

 .a{ width:300px; height:300px; background:red; margin:1px; }.b{ width:200px; height:200px; background:blue; }.c{ width:100px; height:100px; background:green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="wrap"> <div class="a" data-id="0"> <div class="b"> <div class="c"><span>657567645</span></div> </div> </div> <div class="a" data-id="1"> <div class="b"> <div class="c"></div> </div> </div> </div>

Answer 1

event.target就是你點擊的內容。 所以當你點擊元素中的跨度時，你得到的是跨度，而不是父元素。

因此，為了讓點擊跨度進行注冊，您可以像獲取錨標記一樣使用 closest() 。

 var linkTrigger = '.c' //jquery works fine and its live $('.wrap').on('click', linkTrigger, function(e) { var parent = $(this).closest('.a'), id = parent.attr('data-id') console.log('jquery: ' + id) }) document.querySelector('.wrap').addEventListener('click', function(e){ if (e.target.closest(linkTrigger)) { var parent = e.target.closest('.a'), id = parent.getAttribute('data-id') console.log('js: ' + id) } })

 .a{ width:300px; height:300px; background:red; margin:1px; }.b{ width:200px; height:200px; background:blue; }.c{ width:100px; height:100px; background:green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="wrap"> <div class="a" data-id="0"> <div class="b"> <div class="c"><span>657567645</span></div> </div> </div> <div class="a" data-id="1"> <div class="b"> <div class="c"></div> </div> </div> </div>