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

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

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

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

Answer 1

您可以使用event的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

如果单击的元素具有主体父级，则检查每次单击都可以执行此操作。 如果条件为false，则单击正文：

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

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

希望能帮助到你。

干杯。

Answer 3

你应该放一个

 event.stopPropagation() 

对所有孩子你想要不bubble 。

jQuery Docs： http ： //api.jquery.com/event.stoppropagation/ 。