jquery - jquery - 防止重叠元素的mousedown堆积

Question

假设我有一个嵌套在另一个 div 中的 div，并且当单击任何 div 时，我有一个 mousedown 事件来触发警报。自然，当 div 嵌套时，只需单击一下，警报就会显示两次。我怎样才能防止这种情况只提醒一次？

Answer 1

$('div').click(function(e) {
      e.stopPropagation();
     //
     //do what you want
});

Answer 2

您可以停止嵌套 div 的点击传播，这意味着它们不会冒泡并触发附加到父 div 的点击处理程序，例如：

// attach to all divs
$("div").mousedown(function() {
    // do stuff
});

// stop propagation for nested divs
$("div div").mousedown(function(e) {
    e.stopPropagation()
});

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

Answer 3

当两个 div 元素嵌套时，我们就有了一个 HTML 元素层次结构。就像是：

body
   firstDiv
      secondDiv

其中，secondDiv嵌入firstDiv其中，而 又嵌入body。现在，每当您单击 secondDiv 时，也会单击 firstDiv，并且还会单击 body。因此，如果您为这 3 个元素创建 3 个事件处理程序（例如显示 3 个警报），您会收到 3 个警报消息。这种现象被称为冒泡，因为如果你想象这些元素是水层（子元素更深），并认为事件（如点击）是一个气泡，当你释放较低层的气泡时，它冒泡到上层直到它到达表面（HTML元素，甚至更高的文档对象和作为根对象的窗口对象）。

使用 jQuery，您可以使用 e.stopPropagation() 函数来取消冒泡。在纯 JavaScript 中，您使用return false;来停止冒泡。

Answer 4

为什么不只将事件处理程序添加到父 div ，那样它总是只会被触发一次

查看 jsFiddle：http: //jsfiddle.net/aPMB3/