Using Both click and dblClick Events

Discussion in 'Javascript' started by Gene Wirchenko, Nov 18, 2011.

  1. Dear JavaScripters:

    Suppose that one wishes to have an action take place when an
    element is clicked and a different one when it is doubleclicked. How
    does the event processing work?

    From my checking under IE9, if I doubleclick, the click event
    will fire twice before the dblClick fires. How do I know when the
    second click will not be coming and can safely proceed with the click
    event action?


    Gene Wirchenko
    Gene Wirchenko, Nov 18, 2011
    1. Advertisements

  2. One approach that might work (untested):

    Create a counter for each element that might be either clicked or double
    clicked. Initialise the counter to 0.

    When the element is clicked, check the counter. If 0, increment the
    counter and call a delayed click event. 200 mSecs should be enough. If
    not 0, just increment the counter.

    In the delayed click event, if the counter is exactly 1, process it as a

    At the end of both click and double click event processing, set the
    counter back to 0.

    The code might look something like:

    <script type="text/javascript">

    var btn5ClickCount = 0;

    function btn5Clicked() {
    if (btn5ClickCount++ == 0) setTimeout("btn5DelayedSingleClick()",200);

    function btn5DblClicked() {
    // do stuff
    btn5ClickCount = 0;

    function btn5DelayedSingleClick() {
    if (btn5ClickCount == 1){
    // do stuff
    btn5ClickCount = 0;


    <input type="button" id="btn5" name="btn5" value="Button 5"
    onclick="btn5Clicked()" ondblclick="btn5DblClicked()">


    Denis McMahon
    Denis McMahon, Nov 18, 2011
    1. Advertisements

  3. Gene Wirchenko

    Tim Streater Guest

    As far as I am aware, you don't except by timing it yourself. On the
    first click set a timer in the single-click handler. If the second click
    occurs within xx msec (I use 250), then in the double-click handler you
    cancel the timer and proceed. If the timer goes off then the two clicks
    get treated separately. You also need a flag so that, on the second
    click within the period, the single-click handler does nothing.

    A nuisance if you ask me but unclear how to avoid it. Trouble is it
    means all single-click actions are delayed by 250msec.
    Tim Streater, Nov 18, 2011
  4. In Windows the idea is that the first click selects something and the
    second click says do some action on the selected thing. Do you really
    want to make the first and second clicks so separate that you never want
    to do both ?

    The trouble with waiting long enough for a possible second click to
    happen is that the Control Panel allows the user to make Windows' double
    click timeout longer or shorter. If you make your timeout shorter than
    windows' worst case then it's a disaster waiting to happen. If, though,
    it's long enough then it will take a long time to recognise the first
    click. This will drive you mad when you're testing, never mind the

    Something that would work is to do the first click action, then cancel
    or undo it if a double click is reported.

    John G Harris, Nov 18, 2011
  5. Thank you for the responses. I was wondering if I was missing
    something on this. I ran into the same issue when I was first
    starting out with Visual FoxPro years ago.

    I wonder how Windows deals with it internally.


    Gene Wirchenko
    Gene Wirchenko, Nov 18, 2011
  6. Gene Wirchenko

    Tim Streater Guest

    Or Mac OS X or presumably Linux too. Same way, I expect. I know that
    under OS X if I double-click on something for which a single click is
    significant (usually select), it does the single-click action and then
    undoes it and does the double-click action.
    Tim Streater, Nov 18, 2011
  7. I am wondering about which events get revealed. If JavaScript
    (or Windows) held onto the click until the time for a doubleclick had
    expired before firing click, the problem with doubleclicking would not
    occur. Maybe.


    Gene Wirchenko
    Gene Wirchenko, Nov 18, 2011
  8. Gene Wirchenko

    Tim Streater Guest

    But then there would have to be a noticeable delay before any
    single-click action was allowed to proceed. I can't remember the exact
    reasoning when developing this aspect for my app, but I know I wanted to
    clearly separate single and double-click actions. So in my case I had to
    accept that there would be a delay for single-click actions. But there
    are plenty of situations where that wouldn't apply so you don't want to
    penalise those too.
    Tim Streater, Nov 18, 2011
  9. I know. I suspect, now having thought about it a bit more, that
    Windows does not ever have anything significant happen with both
    events. Clicking on something can give it focus. Big deal. This
    does not make a change.

    What we do not see -- correct me if you have an example -- of
    where both click and doubleclick do something significant. For
    example, click executing the object and doubleclick opening it in
    NotePad. If this is so, then it is a bit of smoke and mirrors.


    Gene Wirchenko
    Gene Wirchenko, Nov 18, 2011
  10. Gene Wirchenko

    Tim Streater Guest

    I don't use Windows very much, but in the case OS X that may well be
    true. In the case of my own app It is definitely *not* the case.
    Tim Streater, Nov 18, 2011
  11. <snip>

    In Windows File Manager, the first click says you want to use this
    picture, not that program that deletes all your files; the second click
    says Open it.

    Sounds pretty significant to me.

    John G Harris, Nov 22, 2011
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.