我有一个DIV与一个分类的foobar,和一些DIV内的DIV是未分类的,但我认为他们继承了foobar类:
$('.foobar').on('click', function() { /*...do stuff...*/ });
我希望它只在点击DIV的某个地方时发射,而不是在它的子DIV上。
我有一个DIV与一个分类的foobar,和一些DIV内的DIV是未分类的,但我认为他们继承了foobar类:
$('.foobar').on('click', function() { /*...do stuff...*/ });
我希望它只在点击DIV的某个地方时发射,而不是在它的子DIV上。
当前回答
如果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
}
}
你可以使用event. currentarget。它只会点击得到事件的元素。
目标= e => 控制台日志(e . currentTarget); 的; <ul onClick={target}类 < li > < p > <i类 < / p > < / li > < /德>
我有同样的问题,并提出了这个解决方案(基于其他答案)
$( ".newsletter_background" ).click(function(e) {
if (e.target == this) {
$(".newsletter_background").hide();
}
});
基本上,如果目标是div则运行代码否则什么都不做(不要隐藏它)
如果您不介意只针对较新的浏览器,还有另一种方法。只需要添加CSS
pointer-events: none;
到您想要捕获点击的div的任何子div。这是支持表
http://caniuse.com/#feat=pointer-events
我没有得到工作的公认答案,但这似乎做的把戏,至少在香草JS。
if(e.target !== e.currentTarget) return;