Javascript 单击父项，忽略其子项

可能重复：

我有两个

div

s，类似这样：

<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>

问题是，如果我单击子项，则会触发事件。如何将此事件仅限于父级

编辑：只是为了澄清；我希望在用户单击红色区域的任何位置时触发此操作。如评论中所述；

h1

不是父项。Tjirp的答案起到了作用，答案中有很多这种解决方案的工作变体。

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

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

---

您可以尝试以下方法：

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

这应该行得通

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

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

编辑：我是对的。这不是最有效的方法，亚历山德罗·米诺切里的回答应该更快。我用他的更新了我的代码。

试试这个：

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

---

最简单的解决方案是检查发起事件的元素（

event.target

）是否与处理单击事件处理程序的元素相同（

this

）：

---

考虑到你所谓的

数据实际上就是事件，这里有一个.
奇怪的参数名称选择。你完全正确，这只是为了好玩。h1和#child一样都是孩子这就成功了！谢谢
$('#parent').click(function(data, handler){
  if (data.target == this) {
    //Do Stuff (only element clicked, not children)
  }
});

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

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