javascript - 只需单击标签即可双击

Question

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

但是当点击事件发生时，双击事件完成，然后我的函数运行 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 >> 好的
• 当我们点击标签时，点击计数器为 +2 >> Nok

如何解决这个问题？

编辑

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

Answer 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 在问题的评论中所说:preventDefault 中有一个大写的 D，因此您的代码引发了异常。但无论如何您都不想要 preventDefault，因为您希望复选框被选中。