仅在单击元素时触发事件，而不在其子元素上触发事件

Question

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

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

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

Answer 1

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

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

    //Other Code Here
});

在这里小提琴：http://jsfiddle.net/o0yptmmp/

Answer 2

如果单击的元素具有正文父级，则可以检查每次单击。如果条件为假，则单击正文：

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

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

希望它有所帮助。

干杯。

Answer 3

你应该放一个

event.stopPropagation()

关于您不想bubble的所有孩子。

jQuery文档：http://api.jquery.com/event.stoppropagation/。