单击父级，忽略其子级[重复]答案

【问题标题】：Click on parent, ignore its children [duplicate]单击父级，忽略其子级[重复]
【发布时间】：2013-01-31 13:58:33
【问题描述】：

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

我有两个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，就会触发事件。如何将此事件限制为仅限父级？

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

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

这应该可行

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

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

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

【讨论】：

成功了！谢谢！

【解决方案2】：

试试这个：

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

【讨论】：

奇怪的参数名称选择，考虑到你所谓的data实际上是事件。

【解决方案3】：

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

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

【讨论】：

你完全正确，这只是为了好玩。 h1 和#child 一样是孩子。 :)

【解决方案4】：

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

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

这是working jsFiddle。

【讨论】：

【解决方案5】：

你可以试试这样的：

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

【讨论】：

【解决方案6】：

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

【讨论】：