javascript - 如何使用点击方法在元素内添加点击方法？

Question

假设我有：

   <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 的结构。

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

你想要Event.stopPropagation()：

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

score 0 · Accepted Answer

0

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

于 2012-04-22T00:26:24.470 回答

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

您要做的是阻止事件（单击）“冒泡”。在这种情况下，您可能希望在冒泡阶段停止事件的传播。如果您使用的是 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/了解更多信息。

6 回答 6