[Java Script] Single Click vs Double Click

[venkata_kesava]

Hello Every One,
I want to support different behaviour when single click on DIV and double click on DIV. When Dbl Click is done, browser is generating 2 single clk and 1 dlbclk events.

How to differentiate in single clk about whether it is due to double clk or single clk. I need to support both IE and FF.

Please suggest on how to handle this.

[Nihiliste]

In my experience, and maybe I'm wrong, you cannot have a onclick and a ondblclick event on the same object.

Everytime I tried to do something like that, the onclick event was grabbing everything, so the ondblclick event was never called.

Maybe someone else have a solution. If so, I would like to know it...

MGB

[venkata_kesava]

Thanks for the prompt response.DIV support onclick event and ondblevent.. Whenever dblclick is done on the DIV then onclick event is called two times. May i know how to handle onclick based on ondblclick status

[mrhoo]

set the dblclick function normally, but use a timeout to call or cancel the single click handler-

var clicktimer;

element.onclick= function(e){
    e= window.event || e;
    if(clicktimer) clearTimeout(clicktimer);
    else clicktimer= setTimeout(function(e){/*click handler*/},250);
}

A doubleclick over text usually also makes a selection, which you may want to remove or use.

[Nihiliste]

mrhoo, thanks for the solution.

MGB

[venkata_kesava]

Hi,

You have used timeout of 250ms, but user can change the time interval for double click from controlpanel. If user make more delay for double click then the able logic will fail. How to avoid this situation. Problem is only in Firefox, IE has handled single and double click correctly

[venkata_kesava]

Hi mrhoo,
Thanks for the response. You have used timeout of 250ms, but user can change the time interval(speed) for double click from controlpanel(mouse - double click speed). If user make more delay for double click then the timeout will fail. How to avoid this situation. Problem is only in Firefox, IE has handled single and double click correctly

[Nihiliste]

Just augment the delay of the timeout to 500ms, 1000ms maybe 2000ms. It should correct this fact.

Personally, with or without accessibility stuff, a dblclick with more than 1-2 seconds between the two clicks isn't a dblclick.

The only impact would be a slow onclick reaction.

MGB

[mrhoo]

You could simplify things by handling single or double clicks from the click event,
and ignore dblclick-
this is also more accessible, there is no good dblclick keyboard equivilent.

var clicktimer;
element.onclick= function(e){
    e= window.event || e;
    if(clicktimer){
        clearTimeout(clicktimer);
        clicktimer= null;
        //do two click event
    }
    else clicktimer= setTimeout(function(e){
        clicktimer= null;
        /* single click code*/
    },500);
}