我有一个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上。
当前回答
$(".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
})
其他回答
如果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 >
//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/
你可以用冒泡来帮助自己:
$('.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
})
定义事件时,该事件具有属性this。此属性表示事件被分配给的DOMElement。要检查触发事件的元素,请使用e.target。
由于事件是在元素的子元素中继承的,因此检查目标是否
function doSomething(event) {
if (this == event.target){
// do something
}
}