CODEWITHSUNDEEP
javascriptclickdouble-click
Triven
Triven

Reputation: 351

execute either single click or double click . Not both

I need to execute one function on single click and other function on double click. Problem I am facing is due to the fact that we can not have double click event without first having two single clicks. I want, whenever we have double click then only double click function should execute not single click function . Below is something I have done so far. Please suggest if there is any better way to do it because below code is not always working perfectly.

HTML

<div class='box'>

JS:

var dblclick = false;

//single click function
$('div.box').on('click',function(){
    setTimeout(function(){
        if(!dblclick){
            console.log('singleClick');
        }
    },200); 
});

//resetting double click flag
$('div.box').on('click',function(){
    setTimeout(function(){
        dblclick = false;
    },400); 
});

//double click function
$('div.box').on('dblclick',function(){
    dblclick = true;
    console.log('doubleClick')
});

CSS:

div.box {
    height: 100px;
    width: 100px;
    border: 1px solid black;
}

Upvotes: 0

Views: 3888

Answers (2)

Marco Bonelli
Marco Bonelli

Reputation: 69346

I think you can do it easily with one timeout, like this:

// where "selector" is your html element selector
var element = $("selector"),
    single_click_timeout;

function clicked(e) {
    single_click_timeout = setTimeout(function() {
        // do something for a SINGLE click
    }, 400);
}

function dblclicked(e) {
    // stop the single click function
    clearTimeout(single_click_timeout);

    // do something for a DOUBLE click
}

element.on("click", clicked);
element.on("dblclick", dblclicked);

The trick here is to set a correct amount of time for the setTimeout function. Obviously an user will not perform a double click clicking with an interval of 1 second between clicks, but neither with an interval of 0.01 seconds. So now you've got to try and choose the correct amount of milliseconds for the double click.

Upvotes: 1

mido
mido

Reputation: 25034

check if this works , fiddle demo

$('div.box').prop("disabled", true); i am using this line to make sure only one is active at a point, also i have kept timeout for click to 1000 ms, you can modify it to what you like.

the js code:

//single click function
$('div.box').on('click',function(){
    setTimeout(function(){
        if($('div.box').prop("disabled"))    return;
        console.log('singleClick');
        $('div.box').prop("disabled", true);
        //some single click work.
        $('div.box').prop("disabled", false);
    },1000); 
});

//double click function
    $('div.box').on('dblclick',function(){       
        if($('div.box').prop("disabled"))    return;
        $('div.box').prop("disabled", true);
        console.log('doubleClick');
        //some work    then enable single click again
        setTimeout(function(){
            $('div.box').prop("disabled",false);
        },2000); 
    });

Upvotes: 1

Related Questions