jQuery 事件冒泡,该怎么解决
jQuery 事件冒泡
jquery 代码:
使用jquery实现了li点击后,显示/隐藏 它的子元素ul,为了防止事件冒泡所以加了 event.stopPropagation();
问题来了,选择框 点击后也会触发了它父元素li的单击事件,ul随着显示/隐藏,我怎么实现点击checkbox后不触发li的单击事件 呢??
------解决方案--------------------
在 checkbox框的点击事件里阻止冒泡即可,或者判断event.target
<ul id="kemu">
<li>
<input type='checkbox' value='496' />科目1
<ul>
<li>
<input type='checkbox' value='506' />科目1-1
<ul>
<li><input type='checkbox' value='508' />科目1-1-1</li>
<li><input type='checkbox' value='508' />科目1-1-2</li>
</ul>
</li>
<li>
<input type='checkbox' value='507' />科目1-2
<ul>
<li><input type='checkbox' value='509' />科目1-2-1</li>
</ul>
</li>
</ul>
</li>
<li><input type='checkbox' value='360' />科目2</li>
</ul>
jquery 代码:
$("#kemu li").bind("click",function(event){
if($(">ul",this).length>0){
if($(">ul",this).is(":visible")){
$(">ul",this).css("display","none");
}else{
$(">ul",this).css({"display":"block"});
}
}
event.stopPropagation();
})
使用jquery实现了li点击后,显示/隐藏 它的子元素ul,为了防止事件冒泡所以加了 event.stopPropagation();
问题来了,选择框 点击后也会触发了它父元素li的单击事件,ul随着显示/隐藏,我怎么实现点击checkbox后不触发li的单击事件 呢??
------解决方案--------------------
在 checkbox框的点击事件里阻止冒泡即可,或者判断event.target