只需双击标签即可轻松点击

Question

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

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

你可以在这里看到一个轻松的例子

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 >>确定
• 当我们点击标签时,点击计数器为+2 >> Nok

如何解决这个问题呢 ？

编辑

preventdefault()以preventDefault()固定的双击,但现在复选框不再检查...

Answer 1

这很有趣.你看到两个click事件,其中一个来自复选框input,另一个(当然)来自label.它是有道理的:点击a label就像点击label标签复选框一样.这是一个更新的小提示,显示正在发生的事情.

所以只需click勾选复选框,不要将其挂钩在标签上:

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

更新了小提琴

正如Rocket在问题评论中所说的那样:它preventDefault有一个资本D,所以你的代码抛出异常.但你preventDefault无论如何都不想要,因为你想要检查复选框.