父母的事件，点击儿童（事件冒泡）

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

 
 
 
Last, First
 
Job Title
 [e-mail]12345 
  
  

由于人员列表在您键入时会被更改，因此到目前为止我使用JQuery的live（）函数自动将点击事件绑定到所有.person元素。 这是不推荐使用和不好的做法，所以我正在尝试更新代码。

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

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

但是我想了解一下如何在vanilla javascript中处理这个问题。 我认为，当点击具有点击事件的项目的子项时，事件将“冒泡”通过元素，并且当它点击.person元素时我可以捕获它。 请原谅邋code的代码，但是类似于：

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

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

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

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

Answer 1

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

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

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

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

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

 
 
 
 
Last, First
 
Job Title
 [e-mail]12345 
  
  

Answer 2

使用jQuery事件时，您将获得两个您应该熟悉的属性：

1. target
2. currentTarget

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

考虑以下代码示例：

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

PS – 当不使用事件委托时，两个属性都应该指向同一个元素。

有关currentTarget的更多信息。