点击事件触发两次

Click event triggering two times

本文关键字：两次 事件      更新时间：2023-09-26


我试图在点击标签文本时运行一些功能，但点击事件触发了两次
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');
});

有人能解释一下为什么会这样吗
我的小提琴在这里，检查一下
https://jsfiddle.net/sureshpattu/hvv6ucu8/3/

这是因为事件冒泡。

通常，所有元素都会将事件冒泡到文档的根，而label标记会将事件气泡到其子节点，这就是单击标签dom时输入标记的勾选方式。

因此，在您的案例中，您将事件处理程序附加到标签，因此

  1. 单击标签标签时调用
  2. 事件在其中冒泡，复选框被选中，复选框再次将事件冒泡到其作为label标记的父节点，因此它被调用两次

要解决这个问题，只需将事件处理程序附加到input/checkbox标记，它应该可以正常工作。

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

但如果你在某些浏览器中遇到这种情况，很可能是因为-

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

因此，在第一种情况下，有两个点击事件：

  • 实际点击<label>
  • 点击标签触发的<input>

在<input>上触发的一个将冒泡到<label>并触发您的处理程序。

在第二种情况下，由于指定了for属性，并且没有与"test"的id匹配的输入，因此即使输入在标签内，也不会触发额外的单击。

单击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);
});

演示

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

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

您忘记在标签（labelone）中放置for属性。只要改变一下。它将工作

相关文章：