问题描述:
比如说现在要做一个自定义的CheckBox,如下图所示
我们会用到label和input标签嵌套,点击label的时候,事件冒泡一次,同时会触发关联的input的click事件,导致事件再次冒泡,以至于自定义的复选框达不到我们想要的效果。
解决办法:
判断事件来源,如果是input,则阻止。js代码如下:
$('label').click(function(e) {
if($(e.target).is('input')){
return;
}
$(this).toggleClass('curr');
});
HTML代码:
<label>
<div class="check">
<i class="iconfont"></i>
<input type="checkbox">
</div>
</label>