如何有点击事件只在父DIV上,而不是孩子?

我有一个带有foobar类的DIV,该DIV中有几个DIV是未分类的,但我认为它们继承了foobar类:

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

我希望它只在点击DIV的某个地方时发射,而不是在它的子DIV上。

291236 次浏览

如果e.targetthis是相同的元素,则没有单击后代。

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

//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/

你可以用冒泡来帮助自己:

$('.foobar').on('click', function(e) {
// do your thing.
}).on('click', 'div', function(e) {
// clicked on descendant div
e.stopPropagation();
});
$(".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
})

如果您不介意只针对较新的浏览器,还有另一种方法。只需要添加CSS

pointer-events: none;

到您想要捕获点击的div的任何子div。这是支持表

< a href = " http://caniuse.com/壮举= pointer-events " > = http://caniuse.com/壮举pointer-events < / >

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

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

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

我的情况类似,但这是在你有很少foobar-s的情况下,你只想关闭一个-每次点击:

查找父case

$(".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. currentarget。它只会点击得到事件的元素。

target = e => {
console.log(e.currentTarget);
};
<ul onClick={target} className="folder">
<li>
<p>
<i className="fas fa-folder" />
</p>
</li>
</ul>

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

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

如果你不能使用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 < / p >

// if its li get value
document.getElementById('li').addEventListener("click", function(e) {
if (e.target == this) {
UodateNote(e.target.id);
}
})
                

                

function UodateNote(e) {


let nt_id = document.createElement("div");
// append container to duc.
document.body.appendChild(nt_id);
nt_id.id = "hi";
// get conatiner value .
nt_id.innerHTML = e;
// body...
console.log(e);


}
li{
cursor: pointer;
font-weight: bold;
font-size: 20px;
position: relative;
width: 380px;
height: 80px;
background-color: silver;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 0.5cm;
border: 2px solid purple;
border-radius: 12%;}
    

p{
cursor: text;
font-size: 16px;
font-weight: normal;
display: block;
max-width: 370px;
max-height: 40px;
overflow-x: hidden;}
<li id="li"><p>hi</p></li>

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

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

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