仅在单击元素而不是其子元素时触发事件答案

【问题标题】：Fire event only when clicking on an element, and not on its children仅在单击元素而不是其子元素时触发事件
【发布时间】：2014-10-01 20:55:47
【问题描述】：

如果我将click 处理程序绑定到body 元素，当我单击页面上的任何内容时，就会触发事件。我可以在每次点击时查看event.target：

$("body").on("click", function(event) {
  if (event.target.tagName == "BODY") {
    ...
  }
});

但这似乎有点矫枉过正。有没有办法只在点击body本身的空白区域时触发事件？

【问题讨论】：

【解决方案1】：

您可以使用事件的eventPhase 属性。 2 的值表示事件当前正在触发目标元素：

$("body").on("click", function(event) {
    //Cancel if not at target
    if (event.eventPhase != 2) return;

    //Other Code Here
});

【讨论】：

【解决方案2】：

如果您在每次点击时检查所点击的元素是否有一个 body 父级，您就可以做到这一点。如果条件为假，则您点击的是正文：

$("body").on("click", function(event) {
  if ($(this).parents('body').length == 0) {
     //Do something
  }
});

在我看来这不是一个好习惯，但这取决于你的代码和项目。

希望对你有帮助。

干杯。

【讨论】：

按照你的解释，body里面的任何嵌套元素都会触发点击，以及点击<html>标签或者window，也就是整个页面。但是，您的代码只会在 <html> 和 window 情况下中断。

【解决方案3】：

你应该放一个

event.stopPropagation()

所有你不想bubble起来的孩子。

【讨论】：