On my HTML page there is an element with some text on it. I assigned an action to take place when that element is clicked. When the users click the element many times in a row, sometimes a double-click occurs, which causes the text to be selected (highlighted), thus damaging the appearance. I tried to prevent it using a dummy event handler that prevents the default behaviour of the double-click (dblclick) event. However, this doesn't seem to work. It seems the text is selected and highlighted before my dummy event handler is even executed.

function doNothing(event) {
  alert('doNothing'); // Added for debugging. The alert is shown, meaning the event handler is invoked. When I get the alert, the text is already highlighted.
  if(!event) event = window.event;
  if(event.preventDefault) event.preventDefault();
  event.cancelBubble = true;
  if(event.stopPropagation) event.stopPropagation();
  return false;
}

myElem.onlick = doSomething; // This is the event for a single click. Works well.
myElem.ondblclick = doNothing; // The event handler is called, but the text is already highlighted.

Specific questions:

1) Has what I'm after got anything to do with the double-click event at all? (As I see the text is already highlighted when the alarm is fired, I suspect maybe it's another mechanism. I suspected the default behaviour for the (single) click event might have had something to do with it, but I cancelled the default behaviour for the (single) click event as well.)

2) If it's not got to do with the dblclick event, what's it got to do with then? How do I prevent it?

3) If it is about the dblclick event, am I doing something wrong? (BTW, I guess using all of preventDefault() and cancelBubble = true and stopPropagation() and return false is an overkill. What's the minimum code I need in order to prevent the default behaviour?)

4) Any other idea how to get the desired oute (double-clicking not selecting and highlighting the text)?

I'm testing with FF 11 (but eventually need a cross-browser solution).

Thanks!

On my HTML page there is an element with some text on it. I assigned an action to take place when that element is clicked. When the users click the element many times in a row, sometimes a double-click occurs, which causes the text to be selected (highlighted), thus damaging the appearance. I tried to prevent it using a dummy event handler that prevents the default behaviour of the double-click (dblclick) event. However, this doesn't seem to work. It seems the text is selected and highlighted before my dummy event handler is even executed.

function doNothing(event) {
  alert('doNothing'); // Added for debugging. The alert is shown, meaning the event handler is invoked. When I get the alert, the text is already highlighted.
  if(!event) event = window.event;
  if(event.preventDefault) event.preventDefault();
  event.cancelBubble = true;
  if(event.stopPropagation) event.stopPropagation();
  return false;
}

myElem.onlick = doSomething; // This is the event for a single click. Works well.
myElem.ondblclick = doNothing; // The event handler is called, but the text is already highlighted.

Specific questions:

1) Has what I'm after got anything to do with the double-click event at all? (As I see the text is already highlighted when the alarm is fired, I suspect maybe it's another mechanism. I suspected the default behaviour for the (single) click event might have had something to do with it, but I cancelled the default behaviour for the (single) click event as well.)

2) If it's not got to do with the dblclick event, what's it got to do with then? How do I prevent it?

3) If it is about the dblclick event, am I doing something wrong? (BTW, I guess using all of preventDefault() and cancelBubble = true and stopPropagation() and return false is an overkill. What's the minimum code I need in order to prevent the default behaviour?)

4) Any other idea how to get the desired oute (double-clicking not selecting and highlighting the text)?

I'm testing with FF 11 (but eventually need a cross-browser solution).

Thanks!

• javascript

• Is simply making your text unselectable not an option? Can the solution use jQuery? – Elliot Bonneville Commented Apr 26, 2012 at 23:53
• Take a look at the selectstart event – Musa Commented Apr 26, 2012 at 23:54
• You can do it with CSS – RobG Commented Apr 27, 2012 at 0:59
• @ElliotBonneville: I would argue that not allowing users to select text is UX fail. – Michael Scheper Commented Aug 14, 2014 at 7:29

2 Answers 2

myElem.onmousedown = function(e) {
    e.preventDefault()
}

edit: changed it from return fasle to e.preventDefault, which will still allow the click event to fire.

Had same issue and right away I added event.preventDefault() in dblclick handler and it didn't help. What I didn't account for was event bubbling and the fact that default behavior was triggered in child element before it was triggered in parent element.

If there's a parent with multiple children, you still need text to be selectable in it but don't want the selection to happen on double click, 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.