Call ondblclick without calling onclick-event

Question

Is there a simple solution without jquery, inside HTML-tags, that will call the ondblclick without causing onclick to happen too?

This always closes the window although it should just show the alert:

<a href="#" ondblclick="alert('dbl')" onclick="window.close();">X</a>

(it only works in a javascript popup, cause you cannot close the main window with window.close();)

If you don't need the close window click return it false. Otherwise you need a function to keep track of how many clicks happened before executing the functions bound to them — Patsy Issa, Sep 09 '13 at 13:46
Here's the best idea: http://stackoverflow.com/questions/1546040/how-to-use-both-onclick-and-ondblclick-on-an-element -- tl;dr - Set a short timeout for single click so it doesn't hijack your dblclick — tymeJV, Sep 09 '13 at 13:47
would this work without using a timeout to catch the singleclick? Because, I don't want to change the behaviour of the whole site just because of this one button. — rubo77, Sep 09 '13 at 14:01
Don't think so...that onclick is going to fire regardless then — tymeJV, Sep 09 '13 at 14:04
Maybe a better solution would be a `onCTRLclick` handler, that would catch the singleclick with the CTRL-Key pressed at the same time: http://stackoverflow.com/questions/18700114/catch-onclick-event-with-ctrl-pressed — rubo77, Sep 09 '13 at 14:06
From jQuery docs but related:"It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable." — Irvin Dominin, Sep 09 '13 at 14:24
what would be the point of both a `click` and `ondblclick`??? — Math chiller, Sep 10 '13 at 06:18
@KitePlayer: that looks good, But I solved it by using CTRL+click instead of dblclick now. Maybe someone else can check your answer. — rubo77, Sep 10 '13 at 07:14
@rubo77 can you post your answer ? This may be useful to others or accept any other answers which you find useful . — Human Being, Sep 10 '13 at 07:16

score 7 · Accepted Answer · edited May 23 '17 at 10:29

My guess is that every solution will also have the problem with the doubleclick timeout-length varying on user preferences described by Irvin Dominin aka Edward in the comment above:

From jQuery docs but related: "It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable."

I abandoned using doubleclick and used CTRL+click instead:

<a href="#" onclick="if(event.ctrlKey) { 
 alert('CTRL+Mouseclick'); return false; 
} else { window.close(); }">X</a>

see:

Catch onclick-event with CTRL pressed

score 5 · Answer 2 · answered Sep 10 '13 at 06:43

5

I have solved this with the below code,

<a id="press" href="javascript:void(0)" onclick="singleClick(event)"
    ondblclick="doubleClick(event)">Click here</a>

<div id="log"></div>

My JavaScript will be ,

    var timer;
    var status = 1;

    function singleClick(event) {
        status = 1;
        timer = setTimeout(function() {
            if (status == 1) {
                document.getElementById("log").innerHTML ='I  am single click !';
            }
        }, 500);

    }

    function doubleClick(event) {
        clearTimeout(timer);
        status = 0;
        document.getElementById("log").innerHTML = 'I  am a double  click!';
    }

Please let me know the status.Hope this helps.

answered Sep 10 '13 at 06:43

Human Being

8,269
28
93
136

1

My guess is that your solution will also have the problem with the doubleclick timeout-length varying on user preferences described by **Irvin Dominin aka Edward** in the comment above. I abandoned using doubleclick and used CTRL+click instead – rubo77 Sep 10 '13 at 07:16
1

I have successfully implemented this in my project and works without any problem. DbClick must me little quick . If you leave some gap , normally it was considered as two single click. – Human Being Sep 10 '13 at 07:19

score 2 · Answer 3 · edited May 23 '17 at 12:18

I think this is a situation difficult to handle, you can use a timeout, but you can't be sure about the correct behaviour.

In the jQuery (but vanilla too) docs there is an important note, that tell us to avoid the handling of both single and double click:

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

So in think that in short:

if you can refactor your UI with a single handler
alternatively use a timeout as suggested here, but will not be bulletproof

score 1 · Answer 4 · edited Feb 07 '17 at 17:11

1

JS:

var single;

HTML:

<a href="#" 
  ondblclick="single=0; alert('dbl')" 
  onclick="single=1; setTimeout(function(){
    if (single) window.close();
  },300);">X</a>

edited Feb 07 '17 at 17:11

rubo77

19,527
31
134
226

answered Feb 07 '17 at 14:27

Meisner

775
11
18

This looks, like it would work. You add a timeout here after that you check if the single click remains single – rubo77 Feb 07 '17 at 17:17
Only remains a small fraction of users that are used to a really long double click time, longer than the 300 ms defined here – rubo77 Feb 07 '17 at 17:19

score 0 · Answer 5 · edited May 23 '17 at 11:47

0

From your code it seems you want both to work depending on number of clicks, then it would be better to introduce a short timeout between clicks and run the respective functions accordingly. You may look here.

edited May 23 '17 at 11:47

Community

1
1

answered Sep 10 '13 at 06:29

ʞɹᴉʞ ǝʌɐp

5,350
8
39
65

score 0 · Answer 6 · answered Feb 20 '15 at 14:17

I know it's not what you want to do for your question, but here's a way to use a click and a double easily:

If you need to select an object with a click (or save a variable for example), you can use javascript to call a function in a "href".

Then you can use the "ondblclik ()" to directly edit the registry, without clicking the edit button.

The function in the "href" is always executed, so do not test it with "alert ()", you will not get a double click, as the message window will open. It runs 2 times, then perform an action that can be a problem, but not to save or update variables.

function clickMe(c){
  var link = document.getElementById('link');
  link.innerHTML = "Clicked: "+c;
}

<a id="link" href="javascript:clickMe(1);void(0);" ondblclick="clickMe(2);">Click Me</a>

Call ondblclick without calling onclick-event

6 Answers6