CODEWITHSUNDEEP
javascriptjquery
Steve
Steve

Reputation: 4908

dblclick not working as expected

II have some code here http://jsfiddle.net/ggHwH/ that increases a box border by 1px each time an UP button is pressed and decreases the border by 1px each time a DOWN button is pressed. Now I'd like to sense a double-click on the down button and have that reduce the border immediately to 0. The problem I'm havng is that if you try to down click the border one px at a time, you can't help but trigger the double-click, even if you click the down button no faster than about once per second. It seems that I should have to do both clicks in less than about 250ms to trigger the double-click. Does anyone know what's going on?

Thanks.

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

Upvotes: 0

Views: 190

Answers (1)

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33880

Having a dblclick mixed with click isnt a good pratice.

However, for your problem, you can create you "own" dblclick. You just need to add 2 var :

var isDbl = false;
var timer = null;

Then your click function will set a timer of 250ms and have a condition :

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

Upvotes: 3

Related Questions