www.webdeveloper.com
Results 1 to 9 of 9

Thread: [Java Script] Single Click vs Double Click

  1. #1
    Join Date
    Sep 2009
    Posts
    27

    Thumbs up [Java Script] Single Click vs Double Click

    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.

  2. #2
    Join Date
    Jul 2007
    Location
    Québec
    Posts
    61
    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

  3. #3
    Join Date
    Sep 2009
    Posts
    27
    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

  4. #4
    Join Date
    Feb 2006
    Posts
    2,927
    set the dblclick function normally, but use a timeout to call or cancel the single click handler-
    Code:
    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.
    Last edited by mrhoo; 10-05-2009 at 10:47 PM.

  5. #5
    Join Date
    Jul 2007
    Location
    Québec
    Posts
    61
    mrhoo, thanks for the solution.

    MGB

  6. #6
    Join Date
    Sep 2009
    Posts
    27
    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

  7. #7
    Join Date
    Sep 2009
    Posts
    27
    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

  8. #8
    Join Date
    Jul 2007
    Location
    Québec
    Posts
    61
    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
    Last edited by Nihiliste; 10-06-2009 at 10:13 PM.

  9. #9
    Join Date
    Feb 2006
    Posts
    2,927
    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.

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles