父母的事件，点击儿童（事件冒泡） [英] Event on parent, click child (event bubbling)

问题描述

我有一个人物搜索脚本，可以在您输入时显示建议。结果的结构是松散的：

I've got a people search script that displays suggestions as you type. The structure for the results is loosely this:

<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（）函数自动将点击事件绑定到所有.person元素。这是不推荐使用和不好的做法，所以我正在尝试更新代码。

Since the list of people gets altered as you type, up until now I was using JQuery's live() function to automatically bind click events to all the .person elements. This is deprecated and bad practice, so I'm trying to update the code.

我看到我可以使用类似的东西：

I see that I could use something like:

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

但我想更多地了解如何在vanilla javascript中处理这个问题。我想，当用点击事件点击某个项目的子项时，该事件会在元素中冒泡，并且当它点击.person元素时我可以捕获它。请原谅邋code的代码，但是类似于：

But I want to understand a bit more about how to handle this in vanilla javascript. I THOUGHT that when clicking on the child of an item with a click event, the event would "bubble" up through the elements, and I could catch it when it hit the .person element. Excuse the sloppy code, but something like:

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

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

I've done similar things in the past, but usually with links. (.person can't be a link in this case because it contains an email link.)

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

So in this case it doesn't work. If I click on .name within .person, the target is .name.

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

This seems like something fundamental that just isn't clicking in my brain. What's the typical way to handle this in JavaScript?

推荐答案

您可以设置 指针事件 到没有适用于所需目标的所有孩子：

You can set pointer-events to none for all children of the desired targets:

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

这样 event.target 将是 .person 元素而不是其后代之一。

This way event.target will be a .person element instead of one of its descendants.

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>

请注意这个方法将破坏 .person 内的交互元素（如链接）的功能。

Note that this approach will break the functionality of interactive elements (such as links) inside .person.

这篇关于父母的事件，点击儿童（事件冒泡）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！