如何让点击事件只在父 DIV 上触发，而不是在子 DIV 上触发? [英] How to have click event ONLY fire on parent DIV, not children?

问题描述

我有一个带有分类 foobar 的 DIV，以及该 DIV 中的一些未分类的 DIV，但我想它们正在继承 foobar 类:

I have a DIV with a classed foobar, and a few DIVs inside that DIV that are unclassed, but I suppose they are inheriting the foobar class:

$('.foobar').on('click', function() { /*...do stuff...*/ });

我希望它仅在单击 DIV 中的某个位置而不是其子 DIV 时触发.

I want that to fire off only when clicking somewhere in the DIV but not on its children DIVs.

推荐答案

如果 e.target 和 this 是同一个元素，那么你没有点击过后代.

If the e.target is the same element as this, you've not clicked on a descendant.

$('.foobar').on('click', function(e) {
  if (e.target !== this)
    return;
  
  alert( 'clicked the foobar' );
});

.foobar {
  padding: 20px; background: yellow;
}
span {
  background: blue; color: white; padding: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert) 
  <span>child (no alert)</span>
</div>

这篇关于如何让点击事件只在父 DIV 上触发，而不是在子 DIV 上触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！