javascript - dblclick 未按预期工作

Question

我这里有一些代码 http://jsfiddle.net/ggHwH/每次按下 UP 按钮时，框边框都会增加 1px，每次按下 DOWN 按钮时，框边框会减少 1px。现在我想感应双击向下按钮并立即将边框减少到 0。我遇到的问题是，如果您尝试一次向下单击边框一像素，您可以'即使您单击向下按钮的速度不超过每秒一次，也会触发双击。看来我必须在大约 250 毫秒内完成两次单击才能触发双击。有谁知道这是怎么回事吗？

谢谢。

   $('#up').click ( function() {
        $('#box').css({'border-top-width' : '+=1px', 'borderRightWidth' :    '+=1px','borderBottomWidth' : '+=1px','borderLeftWidth' : '+=1px'});
    });

$('#down').click ( function() {
    $('#box').css({'border-top-width' : '-=1px', 'borderRightWidth' : '-=1px','borderBottomWidth' : '-=1px','borderLeftWidth' : '-=1px'});
});

$('#down').dblclick ( function() {
    $('#box').css({'border-top-width' : '0px', 'borderRightWidth' : '0px','borderBottomWidth' : '0px','borderLeftWidth' : '0px'});
});

Answer 1

将 dblclick 与 click 混合使用并不是一个好的做法。

但是，对于您的问题，您可以创建“自己的”dblclick。您只需要添加 2 个 var :

var isDbl = false;
var timer = null;

然后您的 click 函数将设置 250 毫秒的计时器并有一个条件:

$('#down').click ( function() {
    clearTimeout(timer)
    timer = setTimeout(function(){
        isDbl = false
    }, 250)
    if(isDbl){
        $('#box').css({'border-top-width' : '0px', 'borderRightWidth' : '0px','borderBottomWidth' : '0px','borderLeftWidth' : '0px'});
        isDbl = false;
    }else{
        $('#box').css({'border-top-width' : '-=1px', 'borderRightWidth' : '-=1px','borderBottomWidth' : '-=1px','borderLeftWidth' : '-=1px'});
    isDbl = true
    }
});

fiddle :http://jsfiddle.net/ggHwH/4/