5

可能重复：
jQuery：单击功能排除子级。

我有两个divs，是这样的：

<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');
    });
});

问题是，如果我点击child，就会触发事件。如何将此事件仅限于父母？

编辑：只是为了澄清；我希望当用户单击红色的任意位置时触发此操作。如评论中所述；不是h1父级。Tjirp 的答案起到了作用，答案中有很多该解决方案的工作变体。

4

6 回答 6

12

这应该工作

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

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

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

于 2013-01-31T14:01:09.977 回答
5

试试这个：

$('#parent').click(function(data, handler){
  if (data.target == this) {
    //Do Stuff (only element clicked, not children)
  }
});
于 2013-01-31T14:02:18.413 回答
1

h1 不是父级， div#parent 是父级。由于事件冒泡，单击 div#child 会触发单击 div#parent。这将防止事件冒泡：

$('#child').on("click", function() {
    return false;
});
于 2013-01-31T14:00:45.887 回答
1

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

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

这是一个有效的 jsFiddle。

于 2013-01-31T14:02:50.010 回答
0

您可以尝试以下方法：

$(document).ready(function(){
    $('#parent h1').click(function(){
        alert('Parent was clicked');
    });
});
于 2013-01-31T14:00:55.370 回答
0 
$(document).ready(function(){
  $('#parent').click(function(){
    if($(this).not("#parent")) {
      return false;
    } else {
      alert('Parent was clicked');
    };
  });
});
于 2013-01-31T14:08:50.320 回答