1

假设我有:

   <div id="outer" onclick="thingsHappen()">
      <div id="inner"></div>
   </div>

当我单击外部内部div 时,会执行 thingsHappen()。这是显而易见的。

现在我需要为内部div 定义不同的方法。例如

$("#inner").click(function() {
    doThings();
});

当我单击内部时, thingsHappen() 和 doThings() 都会执行。当我单击内部 div 而不执行 thingsHappen() 时如何执行 doThings()?

我试图从#inner 中取消绑定单击方法,但它不起作用。PS。我无法更改 HTML 的结构。

4

6 回答 6

2

停止事件的传播

$("#inner").click(function(e) {
    doThings();
    e.stopPropagation();
});

示例:http: //jsfiddle.net/QNt76/

JavaScript 事件会在 DOM 树中冒泡,除非您阻止它们传播。这就是导致父事件处理程序收到通知的原因。

于 2012-04-22T00:26:10.347 回答
1

你想要Event.stopPropagation()

$("#inner").click(function(e) {
    doThings();
    e.stopPropagation();
});
于 2012-04-22T00:26:32.970 回答
0
$("#inner").click(function(e) {
    e.stopPropagation();
    doThings();
});​
于 2012-04-22T00:26:24.470 回答
0

您必须停止传播到文档树:

$("#inner").click(function(event) {
    doThings();
    event.stopPropagation();
});

见:http ://api.jquery.com/event.stopPropagation/

防止事件在 DOM 树中冒泡,防止任何父处理程序收到事件通知。

于 2012-04-22T00:26:56.820 回答
0

除非像这样停止传播,否则与子元素有关的事件会冒泡到 DOM 中的父元素:

$("#inner").click(function(event) {
    doThings();
    event.stopPropagation();
});

这是关于捕获/冒泡和 Javascript 事件的好读物。http://www.quirksmode.org/js/events_order.html

于 2012-04-22T00:34:30.490 回答
0

您要做的是阻止事件(单击)“冒泡”。在这种情况下,您可能希望在冒泡阶段停止事件的传播。如果您使用的是 jquery,则可以使用此功能:

HTML

<div id="outer" onclick="thingsHappenOuter()"> 
    <div id="inner">
    </div> 
</div>

JS

$("#inner").click(function(event) {       
    event.stopPropagation();
    // do something     
});

请参阅:http : //api.jquery.com/event.stopPropagation/了解更多信息。

于 2012-04-22T00:43:39.393 回答