Javascript 只需单击标签即可进行双击

我有一个标签和一些函数在点击它时运行

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

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

HTML:

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

如何解决这个问题

编辑

---

preventdefault（）

到

preventdefault（）

修复了双击，但现在复选框不再被选中…

未捕获类型错误：对象没有“preventdefault”方法

preventdefault

中的

d

应大写

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

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

---

相关：

这很有趣。您将看到两个

单击事件，一个来自复选框
输入
，另一个（当然）来自
标签
。这很有意义：按设计，单击
标签
就像单击
标签
标签复选框一样。展示正在发生的事情

因此，只需勾选复选框上的
点击
，而不勾选标签：

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



正如Rocket在问题的评论中所说：
preventDefault
中有一个大写的
D
，因此您的代码抛出了一个异常。但是无论如何，您都不希望
preventDefault
，因为您希望复选框被选中。
这样做：

<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();
    });
});


点击这里
咔哒声​
$（文档）.ready（函数（）{
$（'.click'）。单击（函数（事件）{
$（'#test'）.val（parseInt（$（'#test'）.val（））+1）；
event.preventdefault（）；
});
});
一个简单的解决方法是忽略其中一个调用。。见下文

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

preventDefault（）将禁用原始函数。
试试这个：

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

HTML

它可以工作
preventDefault
中有一个大写的
“D”
。为什么要将单击处理程序绑定到标签上？为什么要将复选框括在标签内？@Vega：将复选框放在标签内，使标签切换复选框，而不需要
属性的
。检查是否有任何关于复选框值更改事件的代码。@Vega将输入括在标签内是标准行为。规范对此表示认可。虽然这是事实，但并不是问题的答案。：-）谢谢，但复选框不再被选中：-（@Valky预期的行为是什么？@jbabey预期的行为是单击复选框和单击计数器以正确递增。最佳答案。不需要preventDefault。@Valky：不用担心，很好的问题--我学到了一些东西。很高兴这有帮助，很好，给你一个+1，但T.J.Crowder解决方案更轻。
$(document).ready(function(){   
    $('label').click(function(event) {
        if (event.target.nodeName == 'LABEL') return;
        $('#test').val(parseInt($('#test').val())+1);         
    });
});

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

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

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