亲子事件

Question

我有一个2 div元素。一个是孩子，一个是父母，如：

<div id="p">
  <div id="c">
  </div>
</div> 

parent div有2个附加事件click和dblclick，而子div有1个附加事件click。现在我的问题是当我点击child div同时也执行了父div点击事件。我尝试e.stopPropagation();但仍然是相同的行为。帮我 ？

Answer 1

你一定做错了，因为stopPropagation应该在这里做的伎俩。确保停止在子元素上传播事件：

$("#c").click(function (e) {
    e.stopPropagation(); //Will prevent event bubbling to #p
});

这是working example。

---

上述唯一的例外是，如果您使用live方法绑定事件处理程序（由于不推荐使用live，您不应该这样做）。您无法阻止live事件的传播，因为事件处理程序绑定到文档而不是元素，并且事件必须在执行之前一直传播到文档。

Answer 2

除了使用stopPropagation之外，您还可以在处理事件之前检查条件（event delegation方法）。这样你现在也可以使用live事件处理程序（在jQuery中由on替换，如果我是正确的话）。见this fiddle

[编辑]：使用bind，您只需要一个为div#p定义的所有处理程序。提供的jsfiddle也会相应调整。