JavaScript suppress double click selection

Question

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

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

You can also use event.preventDefault()

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

Answer 2

Just FYI, in Firefox and Safari/Chrome, selection can be disabled through CSS, too:

.navigationDiv {
    -moz-user-select: none;             
    -webkit-user-select: none;  
}

I think this is more simple when your purpose is only to prevent selections from taking place on a certain element.

Answer 3

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 4

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

Answer 5

Calling event.preventDefault() in dblclick handler will help only if it is called in the element BEING CLICKED, not in the parent's event handler.

In scenarios when there's a container with multiple children, default behaviour of double click will happen in a child and bubbled up to it's parent. In this case there're 2 options:

1. Clear selection in parent's event handler, e.g.: window.getSelection().empty(). The issue with this approach is that you'll notice blinking of the selected text and in Opera there'll be a pop-up ('Copy', 'Search').
2. Traverse all children and call e.PreventDefault() in their dblclick.

Answer 6

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

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

Answer 7

Cancel the ondblclick event:

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

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

Answer 8

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.

Answer 9

Neither e.preventDefault() nor return false ensure in all cases, that double-click's default action (text selection) will not happen. But, having read this note and this answer I've composed a working solution for a similar problem of my own:

$(...your selector...)
    .on('mousedown',function(e){ if (e.detail>1) return false }) // prevent dblclick default
    .on('dblclick', ...your dblclick handler...);