Javascript/Jquery 单事件目标委托(delegate)

Question

我意识到，当 event.target 冗余与下一个级别中的另一个事件绑定(bind)时，将来可能会导致很多问题。

例如，当我在另一个元素中有一个 Div 元素时。

<div id='div1'>
  <div id='div2>
  </div>
</div>

我使用以下 Jquery 代码来绑定(bind)事件。

$('div').bind('click', function(event){
   alert(event.target.id)
}

有两个警报框而不是一个。我理解为什么是因为我点击了 2 个 div。

当然，更深层次的问题是，当我尝试将此事件之后的事件与 event.target 相应绑定(bind)时，它会绑定(bind) x2 依此类推。

是否可以摆脱外部 div 上的事件绑定(bind)并仅捕获内部。

提前致谢。

Answer 1

您可以阻止该事件from bubbling使用 event.stopPropgation() 像这样:

$('div').bind('click', function(event){
  alert(event.target.id);
  event.stopPropagation();
});

You can give it a try here 。这将“捕获”click上第一<div>得到它，并且不会让它传播给任何 parent 。