Javascript 事件，单击子事件（事件冒泡）

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

<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:person@company.com">person@company.com</a><span class="phone">12345</span>
    </div>
    <!-- more people... -->
  </div>
</div>

但我想更多地了解如何在香草javascript中处理这个问题。我认为，当使用click事件单击项目的子项时，该事件会在元素中“冒泡”，当它击中.person元素时，我可以捕捉到它。请原谅代码太草率，但类似于：

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

我过去也做过类似的事情，但通常都是通过链接。（.person在此情况下不能是链接，因为它包含电子邮件链接。）

所以在这种情况下，它不起作用。如果我在.person中单击.name，目标是.name

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

您可以为所需目标的所有子级设置

none

：

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

这样，

event.target

将是一个

.person

元素，而不是其子元素之一

document.getElementById（'peopleResults'）.addEventListener（'click'，函数（e）{
if（e.target.classList.contains（'person'））{
警报（“被点击的人”）；
}
});
.person>*{
指针事件：无；
}

最后，首先
职位名称
12345
当使用jQuery事件时，您将获得两个您应该熟悉的属性：

目标
currentTarget
使用事件委派（意味着捕获父元素上的事件）时，
target
将是最初触发事件的元素，而
currentTarget
将是捕获事件的元素

考虑以下代码示例：

$('#peopleResults').on('click', '.person', function(e) {
    if ($(e.currentTarget).hasClass('person')) console.log('yay!');
});

注意：当不使用事件委派时，两个属性都应指向同一元素

有关@Jonast92的更多信息。
可能重复的@Jonast92我看不出这两个问题之间的联系。
$('#peopleResults').on('click', '.person', function(e) {
    if ($(e.currentTarget).hasClass('person')) console.log('yay!');
});