定义事件时，该事件具有属性this。此属性表示事件被分配给的DOMElement。要检查触发事件的元素，请使用e.target。

由于事件是在元素的子元素中继承的，因此检查目标是否

function doSomething(event) {
  if (this == event.target){
    // do something
  }
}

//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)
});

这将停止点击事件在.foobar元素的任何子元素上的传播(冒泡)，因此事件不会到达.foobar元素以触发它们的事件处理程序。

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

我有同样的问题，并提出了这个解决方案(基于其他答案)

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

基本上，如果目标是div则运行代码否则什么都不做(不要隐藏它)

我没有得到工作的公认答案，但这似乎做的把戏，至少在香草JS。

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

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

$ (' .foobar ')。On ('click'，函数(e) { If (e.target !== this) 返回; Alert('点击foobar'); })； .foobar { 填充:20 px;背景:黄色; ｝ 跨度{ 背景:蓝色;颜色:白色;填充:8 px; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <div class='foobar'> .foobar (alert) <span>child (no alert)</span> < / div >

定义事件时，该事件具有属性this。此属性表示事件被分配给的DOMElement。要检查触发事件的元素，请使用e.target。

由于事件是在元素的子元素中继承的，因此检查目标是否

function doSomething(event) {
  if (this == event.target){
    // do something
  }
}