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
}

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

1 个答案: