我正在尝试在单击标签文本时运行某些功能,但点击事件会被触发两次
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/
答案 0 :(得分:5)
这是因为event bubbling。
通常,所有元素都会将事件冒充到文档的根目录,而label
标记会将事件冒充到子节点,这就是当您输入标记时如何勾选输入标记点击标签dom。
因此,在您的情况下,您将事件处理程序附加到标签标记以便
label
标记的父节点,因此它被调用两次。要解决此问题,只需将事件处理程序附加到input / checkbox标记即可正常工作。
答案 1 :(得分:3)
我无法在我正在使用的chrome版本中重现这一点。
但如果您在某些浏览器中遇到此问题,可能是因为 -
根据规范,包含输入的标签以及通过for
属性连接到输入的标签会在点击相关输入时触发点击。
因此,在您的第一个案例中,有2个点击事件:
<label>
<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);
});
答案 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)中添加属性。只是改变它。它会起作用