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

这是因为event bubbling。

通常，所有元素都会将事件冒充到文档的根目录，而label标记会将事件冒充到子节点，这就是当您输入标记时如何勾选输入标记点击标签dom。

因此，在您的情况下，您将事件处理程序附加到标签标记以便

点击标签标签时调用
其中的事件气泡和复选框被选中，复选框将事件再次发送到其label标记的父节点，因此它被调用两次。

要解决此问题，只需将事件处理程序附加到input / checkbox标记即可正常工作。

Answer 2

我无法在我正在使用的chrome版本中重现这一点。

但如果您在某些浏览器中遇到此问题，可能是因为 -

根据规范，包含输入的标签以及通过for属性连接到输入的标签会在点击相关输入时触发点击。

因此，在您的第一个案例中，有2个点击事件：

实际点击<label>
点击{/ 1}}上的标签

<input>上触发的内容会冒出<input>并触发您的处理程序。

在第二种情况下，由于指定了<label>属性并且没有匹配的输入for的'test'，即使输入在标签内，也不会触发附加点击。

Answer 3

点击checkbox点击label。尝试在输入

上使用.change事件

$('.label_one input').change(function(){
    var html = '<div class="log_sec_one">Log</div>';
    $('.logs').append(html);
});

$('.label_two input').change(function(){
    var html = '<div class="log_sec_two">Log</div>';
    $('.logs').append(html);
});

DEMO

Answer 4

将输入移到标签之外，并使用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/

Answer 5

<label for="text" class="label_one">
    Label One
    <input type="checkbox"/>
</label>
<br/><br/>
<label for="text" class="label_two">
    Label Two
    <input type="checkbox" name="1"/>
</label>

您忘记在标签（label_one）中添加属性。只是改变它。它会起作用

点击事件触发两次

5 个答案: