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

Question

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

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

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

Answer 1

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

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

    //Other Code Here
});

在这里 fiddle :http://jsfiddle.net/o0yptmmp/