execute either single click or double click . Not both

Question

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

From a user experience perspective it sounds like the wrong thing to do. I'm trying to think of one application that does an entirely different thing on a double click, and I can't. What if someone has set their double click speed to a low or high amount? Your assuming the double click speed in your timeout which is probably your problem. Perhaps if you post what you are trying to achieve you may get some alternative solutions. — Lee Willis, Oct 03 '14 at 08:18
Suppose I want to place an image on my website and ask visitor to give like and dislike comments on different areas on the image. A single click on image will open a box with green background in which they can enter what they like at the area the clicked. A double click will open a box with red background to enter what they dislike. — Triven, Oct 03 '14 at 08:29
@LeeWillis Well take a look at Windows for example. At standar settings the single click select and double click open/execute. But just like the OP problem, really do both thing, first select and then execute at double click. — frikinside, Oct 03 '14 at 08:29
@frikinside - the single click isn't suppressed though. If you double click the item is selected, then opened. It wasn't entirely clear what the OP is trying to do, but he has now posted a comment. — Lee Willis, Oct 03 '14 at 10:47
just found similar link here http://stackoverflow.com/questions/17921556/double-click-ambiguity-in-jquery?rq=1 — Triven, Oct 03 '14 at 11:08

Marco Bonelli · Accepted Answer · 2014-10-03T08:52:49.240

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.

score 1 · Answer 2 · answered Oct 03 '14 at 08:49

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

execute either single click or double click . Not both

2 Answers2