点击事件触发两次

Question

我正在尝试在单击标签文本时运行某些功能,但是单击事件已触发两次.
HTML

<label class="label_one">
    Label One
    <input type="checkbox"/>
</label>

但如果我改变这样的html代码,它就不会发生.

<label for="test" class="label_two">
    Label Two
    <input type="checkbox"/>
</label>

我的脚本是这样的:

$('.label_one').click(function(){
    console.log('testing');
});

任何人都可以解释为什么会发生这种情况.
我的jsfiddle在这里检查一下.
https://jsfiddle.net/sureshpattu/hvv6ucu8/3/

Answer 1

这是因为事件冒泡.

通常,所有元素都会将事件冒泡到文档的根目录,而label标记会将事件冒泡到其子节点,以及单击标签dom时输入标记是如何勾选的.

所以你的情况,你的附加事件处理程序标签,标签等等

1. 单击标签标签时调用它
2. 其中的事件气泡和复选框被选中,复选框将事件发送到其父节点,该节点label再次成为标记,因此它被调用两次.

要解决这个问题,只需将事件处理程序附加到input/checkbox标签即可正常工作.

Answer 2

将输入移到标签之外，并使用该for=""属性。

<label class="label_one" for="checkbox_one">
    Label One
</label>
<input type="checkbox" id="checkbox_one" />
<br/><br/>
<label for="checkbox_two" class="label_two">
    Label Two
</label>
<input type="checkbox" id="checkbox_two"/>

<div class="logs"></div>

JSFiddle： https: //jsfiddle.net/hvv6ucu8/2/