javascript - 使用 JavaScript 的父节点上的委托(delegate)事件冒泡问题

Question

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

我有一些标记，例如:

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

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

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。

Answer 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
}