使用 JavaScript 在父节点上的委托事件冒泡问题答案

【问题标题】：Bubbling issue with delegated event on parent node with JavaScript使用 JavaScript 在父节点上的委托事件冒泡问题
【发布时间】：2012-04-22 22:30:17
【问题描述】：

我在让我的事件正确冒泡时遇到问题我相信委托事件。

我有一些标记，例如：

<div id="wrapper">
<!-- more HTML -->
  <div class="clear">
    <a href="#">
      Clear completed <span>items</span>
    </a>
  </div>
</div>

我想向.clear 添加一个事件，因此我将我的处理代码放在附加到#wrapper 的委托事件中。我的问题是我的活动似乎没有冒泡。换句话说：

getElementById('wrapper').addEventListener('click', app.controller.update, true);

app.controller.update = function(e){
  console.log(e.target.nodeName) //returns either A or SPAN
  while(e.target.nodeName !== 'DIV'){
    //Infinite loop because no bubbling is happening
  }
}

想法？是的，我可以将它直接附加到元素上，但我想将所有事件保存在一个容器中。不，没有 jQuery。

【问题讨论】：

您将addEventListener 的捕获参数设置为true 是否有原因？
没有。我试过真假来确定。在我添加这个之前，我一直认为它是假的。
您的代码没有显示id为'wrapper'的元素，并且只有一个e.target，因此循环要么是无限的，要么是不必要的。如果目标是 'wrapper' 元素，则执行任何操作。
啊，关于 e.target 的重点。至于包装器的 id，那只是我在上面的 HTML 中使用class 而不是id 的错字。

标签： javascript events delegation

【解决方案1】：

事件冒泡意味着在子节点上引发的事件可以由父节点处理（如果它没有被该子节点取消）。

e.target 包含事件的发起者。因此，如果您单击span 或a 标签，它将包含对这些标签的引用。要检查是否在 div#clear 中发起了点击，您可以尝试这样的循环：

var el = e.target || e.srcElement;
while(el.nodeName !== 'DIV' && (el.id !== 'clear' || el.id !== 'wrapper')) 
// climb up to parent nodes until clear or wrapper is found
{
    el = el.parentNode;
}
if (el.id == 'clear')
{
    // Do smth
}

【讨论】：