在父级事件上，单击子级（事件冒泡）

Question

我有一个人员搜索脚本，在您键入时显示建议。结果的结构大致如下：

<div  id="peopleResults">
  <div class="resultHolder">
    <div data-userid="ABC123" class="person">
        <div class="name">Last, First</div>
        <div class="title">Job Title</div>
        <a class="email" href="mailto:[e-mail]">[e-mail]</a><span class="phone">12345</span>
    </div>
    <!-- more people... -->
  </div>
</div>

由于人员列表会随着您的键入而改变，到目前为止，我使用jQuery的live（）函数自动将click事件绑定到所有的.person元素。这是不推荐的和糟糕的做法，所以我正在尝试更新代码。

我觉得我需要这样的东西：

$('#peopleResults').on('click', '.person', function(){
    // handle the click
})

但是我想更多地了解一下如何在vanilla JavaScript中处理这个问题。我以为当点击带有click事件的项的子项时，该事件会通过元素“冒泡”向上，当它击中.Person元素时，我就能抓住它。请原谅这些草率的代码，但类似于：

document.getElementById('peopleResults').addEventListener('click', function(e){
    if(e.target.classList.contains('person')) {
        // handle click 
    }
});

这似乎是一些基本的东西，只是没有点击在我的大脑。在JavaScript中处理这个问题的典型方法是什么？

Answer 1

您可以将所需目标的所有子目标的pointer-events设置为none:

.person > * {
  pointer-events: none;
}

这样，event.target将是一个.person元素，而不是它的一个后代元素。

js prettyprint-override">document.getElementById('peopleResults').addEventListener('click', function(e){
  if(e.target.classList.contains('person')) {
    alert('Person clicked');
  }
});

.person > * {
  pointer-events: none;
}

<div  id="peopleResults">
  <div class="resultHolder">
    <div data-userid="ABC123" class="person">
      <div class="name">Last, First</div>
      <div class="title">Job Title</div>
      <a class="email" href="mailto:[e-mail]">[e-mail]</a><span class="phone">12345</span>
    </div>
    <!-- more people... -->
  </div>
</div>