javascript - Call ondblclick without calling onclick-event - Stack Overflow

admin管理员组

文章数量:1185452

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

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

• javascript
• html

Share Improve this question Follow edited Sep 9, 2013 at 14:01 rubo77 asked Sep 9, 2013 at 13:45 rubo77rubo77 20.8k3333 gold badges144144 silver badges240240 bronze badges 10

• 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 Commented Sep 9, 2013 at 13:46
• 8 Here's the best idea: stackoverflow.com/questions/1546040/… -- tl;dr - Set a short timeout for single click so it doesn't hijack your dblclick – tymeJV Commented Sep 9, 2013 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 Commented Sep 9, 2013 at 14:01
• Don't think so...that onclick is going to fire regardless then – tymeJV Commented Sep 9, 2013 at 14:04
• 1 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 Commented Sep 9, 2013 at 14:24

 |  Show 5 more comments

6 Answers 6

Sorted by: Reset to default 7

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

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.

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:

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

JS:

var single;

HTML:

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

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.

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>

本文标签： javascriptCall ondblclick without calling onclickeventStack Overflow