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

Question

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

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

如何解决这个问题呢 ？

编辑

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

Answer 1

嗯，这很有趣。您会看到两个click事件，其中一个来自 checkbox input，另一个（当然）来自label. 这是有道理的：按设计，单击 alabel就像单击label标签的复选框。这是一个更新的小提琴，显示正在发生的事情。

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

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

更新的小提琴

---

And as Rocket said in the question's comments: preventDefault has a capital D in it, so your code was throwing an exception. But you didn't want preventDefault anyway, because you want the checkbox to be checked.

Answer 2

A simple workaround is to ignore one of the call.. See below,

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

DEMO

Answer 3

Uncaught TypeError: Object # has no method 'preventdefault'

dinpreventdefault应该大写。

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

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

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

相关：http ://www.webmonkey.com/2010/02/javascript_debugging_for_beginners/

Answer 4

The preventDefault() will disable the original function. Try this:

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

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

It works

Answer 6

Do it like this:

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