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

Question

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

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

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

sssccc


  

    

      
657567645