Question

可能重复：
jQuery: click function exclude children.

我有两个div，类似这样：

<div id="parent" style="width: 100%; height: 100%; background-color:red;" />
    <h1>I'm the parent!</h1>
    <div id="child" style="width: 300px; height: 200px; background-color:yellow;">
        </h2>..and I'm the child!</h2>
    </div>
</div>

此外，我还有以下JavaScript代码：

$(document).ready(function(){
    $('#parent').click(function(){
        alert('Parent was clicked');
    });
});

问题是，如果我点击孩子，会触发该事件。我怎样才能将此事件限制为仅限父母？

编辑：只是为了澄清;我希望当用户点击红色的任何地方时触发此操作。正如评论中所说; h1不是父母。 Tjirp的回答很明显，答案中有很多这种解决方案的工作变体。

Answer 1

这应该有效

$(document).ready(function() {
    $('#parent').click(function(e) {
        if (e.target == this) { 
            alert('Parent was clicked');
        }
    }
}

这样您就不必将任何东西绑定到您的孩子身上。 click事件将传播到您的click处理程序，并检查click事件的目标是否确实是您添加事件的元素。

编辑：我是对的。这不是最有效的方式，Alessandro Minoccheri的回答应该更快。我用他的代码更新了我的代码。

Answer 2

试试这个：

$('#parent').click(function(data, handler){
  if (data.target == this) {
    //Do Stuff (only element clicked, not children)
  }
});

Answer 3

最简单的解决方案是检查发起事件的元素（event.target）是否与处理click事件处理程序（this）的元素相同：

$('#parent').click(function(event){
    if(this === event.target) {
        alert('Parent was clicked');
    }
});

这是working jsFiddle。

Answer 4

h1不是父级，div＃parent是父级。点击div＃child触发器因为事件冒泡而点击div＃parent。这样可以防止事件冒泡：

$('#child').on("click", function() {
    return false;
});

Answer 5

您可以尝试以下内容：

$(document).ready(function(){
    $('#parent h1').click(function(){
        alert('Parent was clicked');
    });
});

Answer 6

$(document).ready(function(){
  $('#parent').click(function(){
    if($(this).not("#parent")) {
      return false;
    } else {
      alert('Parent was clicked');
    };
  });
});

单击父级，忽略其子级

6 个答案: