问题描述:
当我们用到a标签和input标签嵌套,点击a标签的时候,事件冒泡一次,同时会触发关联的input的click事件,导致事件再次冒泡,以至于CheckBox达不到我们想要的效果。
<a href="javascript:;" id="SelectType" class="right" >
<input type='checkbox' name="SelectType" />全选</a>
解决办法:
//判断事件来源,如果不是input,则改变checked
if(!$(e.target).is('input')){
if (checked.checked) {
checked.checked=false;
} else {
checked.checked =true;
}
}
//判断事件来源,如果是input,则阻止
$('label').click(function(e) {
if($(e.target).is('input')){
return;
}
$(this).toggleClass('curr');
})
//给checkbox添加阻止冒泡事件
$("input[type='checkbox']").click(function(e){
e.stopPropagation();
});
//e代表event,是jQuery会传进来的第一个参数。
$("body").on("click",function(e){
var ele = e.target
});
//通过e.target就可以获取到触发当前事件的对象,这是实际最常见的用法
//意思是:如果后面需要获取操作的信息,就要加e
//如果不需要,只是完成一个事件,就可以不加e