点击父节点，忽略其子节点。

Question

可能是重复问题：
jQuery：点击函数排除子元素。

我有两个 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的答案解决了问题，并且有很多这种解决方案的变体在答案中可用。

- gubbfett

Answer 1

这应该可以运行

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

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

编辑：我是正确的。 这不是最有效的方式，Alessandro Minoccheri的答案应该更快。 我已经更新了我的代码。

- Tjirp

---

这个技巧很有效！谢谢！ - gubbfett

Answer 2

试试这个：

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

- Alessandro Minoccheri

---

奇怪的参数名称选择，考虑到您所称呼的“data”实际上是事件。 - Anthony Grist

Answer 3

h1不是父元素，div#parent是父元素。 点击div#child会触发div#parent的点击事件，因为事件冒泡。 以下代码可以阻止事件冒泡：

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

- David Fregoli

---

你说得完全正确，这只是为了好玩。h1和#child一样都是子元素。 :) - gubbfett

Answer 4

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

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

这是一个工作中的jsFiddle。

- Anthony Grist

Answer 5

你可以尝试这样做：

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

- ioan

Answer 6

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

- Nick DeStefano