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

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

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

You can give it a try here。这会将click“陷阱”在获得它的第一个<div>上，并且不会让它传播给任何父母。

Answer 2

我认为你只需要在bind调用中选择内部div：

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