只需单击标签即可双击答案

【问题标题】：Simple click on labels makes double click只需单击标签即可双击
【发布时间】：2023-04-08 17:13:01
【问题描述】：

我有一个标签和一些在点击它时运行的功能。

但是当点击事件发生时，双击事件就完成了，然后我的函数运行2次...

你可以看一个简单的例子here

HTML：

<label>
<input type="checkbox" id="checkbox"> Click here
</label>
<input type="text" id="test" value="0"/> clicks

JavaScript：

$(document).ready(function(){
    $('label').click(function(event) {
         $('#test').val(parseInt($('#test').val())+1);
         event.preventdefault();
    });
});

当我们点击复选框时，点击计数器为 +1 >> Ok
当我们点击标签时，点击计数器为 +2 >> Nok

如何解决这个问题？

编辑

preventdefault() 到 preventDefault() 修复了双击，但现在不再选中复选框...

【问题讨论】：

preventDefault 中有一个大写字母 "D"。
为什么要将点击处理程序绑定到标签？以及为什么要在标签内附上一个复选框？
@Vega：将复选框放在标签内，使标签在不需要for 属性的情况下切换复选框。
检查复选框值更改事件是否有任何代码。
@Vega 将输入包含在标签内是标准行为。规范对此表示赞同。

标签： javascript jquery click label

【解决方案1】：

这很有趣。您会看到两个click 事件，其中一个来自复选框input，另一个（当然）来自label。这是有道理的：点击label 就像点击复选框label 标签，按设计。 Here's an updated fiddle 显示正在发生的事情。

所以只需将click 挂在复选框上，不要将其挂在标签上：

$(document).ready(function(){
    $('#checkbox').click(function(event) {
        $('#test').val(parseInt($('#test').val())+1);
    });
});

Updated fiddle

正如 Rocket 在问题的 cmets 中所说：preventDefault 中有一个大写字母 D，因此您的代码引发了异常。但是您无论如何都不想preventDefault，因为您希望选中复选框。

【讨论】：

最佳答案。不需要 preventDefault。
@Valky：别担心，很好的问题——我学到了一些东西。很高兴这有帮助，

【解决方案2】：

一个简单的解决方法是忽略其中一个调用。见下文，

$(document).ready(function(){   
    $('label').click(function(event) {
        if (event.target.nodeName == 'LABEL') return;
        $('#test').val(parseInt($('#test').val())+1);         
    });
});

DEMO

【讨论】：

很好，给你一个 +1，但是 T.J. Crowder 解决方案更轻。

【解决方案3】：

Uncaught TypeError: Object # has no method 'preventdefault'

preventdefault 中的d 应大写。

编辑：嵌套在标签中的复选框的浏览器行为是在单击标签时触发单击复选框。要解决原始问题，只需将递增的单击处理程序绑定到复选框。

$(document).ready(function(){
    $('#checkbox').click(function(event) {
         $('#test').val(parseInt($('#test').val())+1);
    });
});

http://jsfiddle.net/vgWGT/28/

【讨论】：

虽然正确，但这不是问题的答案。 :-)
谢谢，但复选框不再被选中 :-(
@Valky 的预期行为是什么？
@jbabey 预期行为是点击复选框，点击计数器正确递增。

【解决方案4】：

preventDefault() 将禁用原始功能。试试这个：

$(document).ready(function(){
    $('input:#checkbox').click(function() {
         $('#test').val(parseInt($('#test').val())+1);
    });
});

【讨论】：

【解决方案5】：

HTML

<input type="checkbox" id="checkbox">
<label for ="checkbox">Click here</label>
<input type="text" id="test" value="0"/> clicks

JS

    $(document).ready(function(){
    $('label').click(function(event) {
    var valor = parseInt($('#test').val());
         $('#test').val(valor+1);
         event.preventdefault();
    });
});

有效

【讨论】：

【解决方案6】：

这样做：

<div class="click">
<input type="checkbox" id="checkbox">
<label>Click here</label>
</div>

<input type="text" id="test" value="0"/> clicks


$(document).ready(function(){
    $('.click').click(function(event) {
         $('#test').val(parseInt($('#test').val())+1);
         event.preventdefault();
    });
});

【讨论】：