如何使点击事件仅在父级DIV而非子级上触发？

我有一个带有foobarclassed的DIV，并且该DIV中有一些未分类的DIV，但是我想它们正在继承foobar该类：

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

我希望仅在单击DIV中的某个位置而不在其子DIV上单击时才会触发。

如果e.target元素与相同this，则您没有单击后代。

$('.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>

如果您不介意仅针对较新的浏览器，则还有另一种可行的方法。只需添加CSS

pointer-events: none;

您想要捕获点击的div的所有子级。这是支持表

http://caniuse.com/#feat=pointer-events

您可以使用冒泡方式：

$('.foobar').on('click', function(e) {
    // do your thing.
}).on('click', 'div', function(e) {
    // clicked on descendant div
    e.stopPropagation();
});

我没有得到公认的工作答案，但这似乎可以解决问题，至少在香草JS中是如此。

if(e.target !== e.currentTarget) return;

//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
    event.stopPropagation();
    //you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});

这将停止click事件在该元素的任何子元素上的传播（冒泡），.foobar因此该事件不会到达该.foobar元素以触发其事件处理程序。

这是一个演示：http : //jsfiddle.net/bQQJP/

$(".advanced ul li").live('click',function(e){
    if(e.target != this) return;
    //code
    // this code will execute only when you click to li and not to a child
})

我遇到了同样的问题，并提出了这个解决方案（基于其他答案）

 $( ".newsletter_background" ).click(function(e) {
    if (e.target == this) {
        $(".newsletter_background").hide();
    } 
});

基本上它说如果目标是div然后运行代码，否则什么也不做（不要隐藏它）

我的情况与此类似，但是这种情况下您的foobar-s 很少，而您每次单击只希望关闭一个-s：

寻找父案

$(".foobar-close-button-class").on("click", function () {
    $(this).parents('.foobar').fadeOut( 100 );
    // 'this' - means that you finding some parent class from '.foobar-close-button-class'
    // '.parents' -means that you finding parent class with name '.foobar'
});

查找儿童案

$(".foobar-close-button-class").on("click", function () {
    $(this).child('.foobar-close-button-child-class').fadeOut( 100 );
    // 'this' - means that you finding some child class from '.foobar-close-button-class'
    // '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});

您可以使用event.currentTarget。它只会做点击事件，而不会得到事件。

target = e => {
    console.log(e.currentTarget);
  };

<ul onClick={target} className="folder">
      <li>
        <p>
          <i className="fas fa-folder" />
        </p>
      </li>
    </ul>

如果您无法使用pointer-events: none;并定位到现代浏览器，则可以使用以下方法composedPath来检测对对象的直接点击：

element.addEventListener("click", function (ev) {
    if (ev.composedPath()[0] === this) {
        // your code here ...
    }
})

您可以在此处阅读有关composedPath的更多信息：https : //developer.mozilla.org/en-US/docs/Web/API/Event/composedPath