点击事件触发两次

时间:2015-10-30 10:47:42

标签: javascript jquery html css


我正在尝试在单击标签文本时运行某些功能,但点击事件会被触发两次 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/

5 个答案:

答案 0 :(得分:5)

这是因为event bubbling

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

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

  1. 点击标签标签时调用
  2. 其中的事件气泡和复选框被选中,复选框将事件再次发送到其label标记的父节点,因此它被调用两次。
  3. 要解决此问题,只需将事件处理程序附加到input / checkbox标记即可正常工作。

答案 1 :(得分:3)

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

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

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

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

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

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

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

答案 2 :(得分:2)

点击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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

<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)中添加属性。只是改变它。它会起作用