Fork me on GitHub

监听checkbox点击事件,点击后触发两次事件处理

例:

<div id="test">
    <label style="display:block; width: 100px;height:100px; background-color: rgb(155, 155, 132);">
<input type="checkbox">
</label></div>
$('#test').click(e => console.log(e.target))
// 点击label区域
// 先打印  label
// 后打印 input

原因: 点击label会主动触发其对应的input#checkbox点击事件。(label特性)

处理方法一:

根据target是否是input#checkbox进行过滤处理

$('#test').click(e => e.target.type === 'checkbox' && console.log(e.target))