只需单击标签即可双击

Simple click on labels makes double click

本文关键字：双击 标签 单击      更新时间：2023-09-26

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

但是当一个点击事件被制造出来时，一个双击事件就完成了，然后我的函数运行了 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()修复了双击，但现在复选框不再选中......

嗯，

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

因此，只需将click钩在复选框上，不要将其挂在标签上：

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

更新的小提琴

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

一个简单的解决方法是忽略其中一个调用。见下文，

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

演示

未捕获的类型错误：对象 # 没有方法"阻止默认"

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/

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

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

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

它有效

这样做：

<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();
    });
});
相关文章：