javascript - dblclick无法正常工作

II这里有一些代码http://jsfiddle.net/ggHwH/，每当按下UP按钮时，框边框将增加1px，而每当按下DOWN按钮时，边框将减小1px。现在，我想双击一个按钮，使边框立即减小到0。我的问题是，如果您尝试一次向下单击边框一个px，您可以即使您单击向下按钮的速度不超过大约每秒一次，也不会帮助您触发双击。似乎我必须在不到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'});
});

最佳答案

将dblclick与click混合并不是一个好习惯。

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

var isDbl = false;
var timer = null;

然后，您的click函数将设置一个250ms的计时器，并具有以下条件：

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

小提琴：http://jsfiddle.net/ggHwH/4/