Javascript / Jquery单事件目标委托

Question

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

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

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

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

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

有两个警报框，而不是一个。 我了解为什么这样的概念，因为我要点击的是2个div。

当然，更深层次的问题是，当我尝试将此事件之后的事件与event.target相应地绑定时，它绑定x2等等。

是否有可能摆脱外部div上的事件绑定而仅捕获内部的事件。

提前致谢。

Answer 1

您可以使用event.stopPropgation()阻止事件冒泡，如下所示：

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

您可以在这里尝试一下 。 这将“捕获”对获得它的第一个<div>的click ，并且不会让它传播给任何父母。

Answer 2

我认为您只需要在绑定调用中选择内部div：

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