如何使用单击方法在元素内部添加单击方法

How to add a click method inside of element with click method?

本文关键字：单击 方法 内部 添加 元素 何使用      更新时间：2023-09-26

假设我有：

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

当我单击外部或内部div 时，将执行 thingsHappen（）。这是显而易见的。

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

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

当我单击内部时，两个 thingsHappen（） 和 doThings（） 都会执行。当我单击内部div 而不执行 thingsHappen（） 时，如何执行 doThings（）？

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

停止事件的传播：

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

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

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

你想要Event.stopPropagation()：

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

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

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

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

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

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

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

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

请参阅：http://api.jquery.com/event.stopPropagation/

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

相关文章：