lable 标签触发两次 click 事件

1. 代码

<div style="padding: 24px; border: 1px dashed #999;">
    <label id="labelId">
        <input type="checkbox" name="checkbox" value="value">
        <span>Text</span>
    </label>
    <script>
        const labelElt = document.querySelector('#labelId');
        labelElt.onclick = (event) => {
            alert(`${event.target.tagName} clicked`);
        };
    </script>
</div>

2. 渲染

Text

3. 问题

• 点击 “Text” 会 alert 两次
• 点击 “checkbox” 只会 alert 一次

4. 原理

点击 label 后会自动向绑定的 input 发送一个 click 事件

也就是说， label 会触发一次 click，input 会触发一次 click

5. 方案

将 input 和 label 分开

<input id="inputId" type="checkbox" name="checkbox" value="value">

<label id="labelId" for="inputId">
    <span>Text</span>
</label>

6. 参考

• Why the onclick element will trigger twice for label element (opens new window)