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

Question

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

我有一些标记，例如：

<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。

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
}