JavaScript suppress double click selection

Question

Hi Guys,

i'm working on a slide gallery at the moment. My problem is that when i click the navigation divs very fast, the browsers default behavior is fired (selection of content).

My question is: how can I suppress the default double click behavior?

navigationDiv.onclick = function () {
  // do something
};

A jQuery solution would also be suitable since i'm using it.

Thanks in advance!

Answer 1

Putting a return false; at the end of the event handler should be able to suppress the default selection behaviour.

Answer 2

You could try making the "dblclick" event return false?

 $('.someStuff').bind('dblclick', function() { return false; });

Answer 3

Cancel the ondblclick event:

navigationDiv.ondblclick = function () { 
  return false;  // cancel default
}; 

http://www.quirksmode.org/js/events_mouse.html

Answer 4

$("yourselector").dblclick(function(){
    return false;
});

You can also use event.preventDefault()

$("yourselector").dblclick(function(event){
    event.preventDefault();
});

Answer 5

Hey.

You could try disabling the onselectstart event of the target element.

navigationDiv.onselectstart=function(){return false}

Not sure if this is x-browser compatible. (I'll check it)

Edit
Turns out that this is a IE-only event. To accomplish the same in Mozilla, you would have to disable the -moz-user-select CSS style. In JavaScript that would be:

navigationDiv.style.MozUserSelect="none"

To be honest, I think you would be better off disabling the double-click event, as described in the other comments here.

Answer 6

Quite Simple:

navigationDiv.ondblclick = function (event) {
  // do something
  if (!event) event = window.event;
        if (event.preventDefault) 
            event.preventDefault();
        else 
            event.returnValue = false;

};

This works on IE and Mozilla browsers.