Question

假设我有一个嵌套有另一个div的div，我有一个mousedown事件，可以在点击任何div时触发警报。自然地，警报显示两次，因为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又嵌入return false;。现在，每当您单击secondDiv时，也会单击firstDiv，并且还会单击body。因此，如果您为这3个元素创建3个事件处理程序（例如show 3警报），则会收到3条警报消息。这种现象被称为冒泡，因为如果你想象这些元素是水层（子元素更深），并考虑和事件（如点击）成为泡沫，当你自由较低层上的气泡，它会向上层气泡直到它到达表面（HTML元素，甚至更高，文档对象和作为根对象的窗口对象）。

使用jQuery，您可以使用e.stopPropagation（）函数取消冒泡。在纯JavaScript中，您使用{{1}}来阻止冒泡。

Answer 4

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

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

jquery - 防止使用重叠元素构建mousedown

4 个答案: