javascript 仅在单击元素时激发事件，而不激发其子元素

9rbhqvlz 于 2022-12-28 发布在 Java

关注(0)|答案(3)|浏览(187)

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

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

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

3条答案

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

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

    //Other Code Here
});

你应该放一个

event.stopPropagation()

所有你不想让bubble上升的孩子

如果在每次单击时检查所单击的元素是否具有body父级，则可以执行此操作。如果条件为false，则表示您正在单击body：

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

在我看来，这不是一个好的实践，但这取决于您的代码和项目。