javascript click事件触发了两次？

Question

很奇怪，click事件的处理函数会触发两次？
为什么呢？

Answer 1

这个代码还看不出问题。放全点。检查下是不是注册了两次

Answer 2

我在 CodePen 上的示例，就不会触发两次，但是，你给的示例 就会，仔细分析了一下，终于发现了问题所在

我的 click 事件是绑在 checkbox 上的，你那个是绑在容器 div 上的

<!-- 我写的示例 -->
<div>
    <input type="checkbox" name="v3" id="v3" />
    <label for="v3">第三条</label>
</div>
<script>
    document.getElementById("v3")  // <-- v3 是 checkbox
        .onclick = e => {
            console.log(e.target);
        }
</script>

<!-- https://www.tuicool.com/articles/zqy2Ez 上的示例 -->

<div id="test">
    <input type="checkbox" name="abc" id="abc" />
    <label for="abc">3423432432432432</label>
</div>

<script type="text/javascript">
    document.getElementById("test")  // <-- test 是容器 div
        .onclick = function (ev) {
            console.log(ev.target);
        }
</script>

所以这根本不是 label 的坑，完全是自己在坑自己！

---

补充两个委托的写法，CodePen 已经改成了委托写法：

使用 jQuery

$("#first").on("click", ":checkbox", e => {
    console.log("click on", e.target);
});

使用 jQuery，不使用箭头函数

$("#first").on("click", ":checkbox", function(e) {
    console.log("click on", this);
});

不使用 jQuery

document.getElementById("second")
    .addEventListener("click", e => {
        // console.log("TARGET", e.target);
        if (e.target.tagName === "INPUT") {
            console.log("CLICK on", e.target);
        }
    });