单击标签变成双击的解决方法

Question

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

但是当进行单击事件时，会执行双击事件，则我的函数运行了两次...

您可以在这里看到一个简单的例子。

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>>不好

如何解决这个问题？

编辑

preventdefault() 改为 preventDefault() 修复了双击问题，但现在复选框不再被选中...

- Valky

---

preventDefault 里的 "D" 是大写的。 - gen_Eric

你为什么要将点击处理程序绑定到标签上？而且你为什么要将复选框包含在标签内？ - Selvakumar Arumugam

@Vega：将复选框放在标签内，使标签切换复选框而无需使用“for”属性。 - gen_Eric

@Vega将输入内容放在标签内是标准行为。规格已经批准了这一点。 - Madara's Ghost

@Valky：我被这个问题迷住了，忘记提醒你了：http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question 我已经为您添加了代码。 - T.J. Crowder

Answer 1

很有趣。您正在看到两个click事件，一个来自复选框input，另一个（当然）来自label。这是有道理的：点击label就像点击label标签的复选框一样，这是设计上的。 这里是更新后的示例，展示了正在发生的事情。

因此，只需在复选框上挂接click，不要在标签上挂接它：

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

更新的fiddle

---

正如Rocket在问题评论中所说：preventDefault大小写敏感，所以你的代码会抛出异常。但是你并不需要preventDefault因为你想让复选框被选中。

- T.J. Crowder

---

最佳答案：preventDefault 不是必需的。 - jbabey

@Valky：别担心，这是个好问题——我也从中学到了东西。很高兴能帮到你。 - T.J. Crowder

Answer 2

一个简单的解决方法是忽略其中一个调用...请参见下面的内容：

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

DEMO

- Selvakumar Arumugam

---

不错，给你一个+1，但T.J. Crowder的解决方案更轻巧。 - Valky

Answer 3

未捕获的类型错误：对象＃没有方法'preventdefault'

preventdefault中的d应该大写。

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

$(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/

- jbabey

---

虽然是真的，但这并不是问题的答案。 :-) - T.J. Crowder

谢谢，但是复选框不再被选中了 :-( - Valky

@Valky，预期的行为是什么？ - jbabey

@jbabey 的预期行为是复选框被选中并且点击计数器能够正确增加。 - Selvakumar Arumugam

Answer 4

preventDefault()会禁用原始函数。 尝试这样做：

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

- rshi

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

它有效。

- user6232188

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

- jos