Question

E.g

<div class="container">
  <div class="inside">I am not fire when click me</div>
</div>

$('.container').click(function(){
  // container do something here
});

但是，当我单击其中的div时，它也会触发容器的click事件，因为div位于容器内部，因此，当我点击内部div时，我需要一种方法来阻止容器事件触发！

非常感谢!!

Answer 1

作为一种更通用的解决方案，您应该检查container的{{1}}事件处理程序中的e.target。

click

这样您就不会阻止事件的传播，这会破坏绑定的live处理程序。

Answer 2

$('.inside').click(function(e) {
    e.stopPropagation();
});

这对你有用。它会阻止内部div中的任何点击冒泡到容器。

以下是一个简单示例 - http://jsfiddle.net/Yf8Ra/1/

Answer 3

将click事件处理程序添加到inside中，如下所示：

$('.inside').click(function(event) {
    // do anything you might want with the click for inside
    return false; // prevents click event from bubbling up the DOM hierarchy
});

或者，event.stopPropagation()也可以防止冒泡：

$('.inside').click(function(event) {
    // do anything you might want with the click for inside
    event.stopPropagation(); // prevents click event from bubbling up the DOM hierarchy
});

This article解释了事件冒泡。

如何在JQuery中单击容器内的元素时取消容器div触发器的click事件？

3 个答案: