How to prevent a double-click from highlighting web-page text using JavaScript?

Question

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 outcome (double-clicking not selecting and highlighting the text)?

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

Thanks!

Is simply making your text unselectable not an option? Can the solution use jQuery? — Elliot Bonneville, Apr 26 '12 at 23:53
You can [do it with CSS](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) — RobG, Apr 27 '12 at 00:59
@ElliotBonneville: I would argue that not allowing users to select text is UX fail. — Michael Scheper, Aug 14 '14 at 07:29

Andy Ray · Answer 1 · 2012-04-27T00:29:15.593

4

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

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

edited Apr 27 '12 at 00:29

answered Apr 26 '12 at 23:54

Andy Ray

30,372
14
101
138

I gave this a +1 but shouldn't have. It "works" in IE 8 and lower because the onmousedown listener throws an error, which is less than desirable. Also, it's not the appropriate event — *selectstart* (if supported) should be used. In any case, it can be done [using CSS](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting). – RobG Apr 27 '12 at 01:00
it doesn't look like -ms-user-select is supported in anything less than IE10? (untested) – Andy Ray Apr 27 '12 at 01:04
Yes, but adding the unselectable attribute in the markup: `unselectable="on"` or DOM property: `element.unselectable = true;` will cover those cases, avoiding a listener. – RobG Apr 27 '12 at 01:33
Oh, if a listener is required, the following will work in IE and Opera: `if (typeof el.onselectstart != 'undefined') {el.onselectstart = function(){return false;};el = null;}` – RobG Apr 27 '12 at 01:51

score 1 · Answer 2 · answered Dec 05 '18 at 10:49

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:

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').
Traverse all children and call e.PreventDefault() in their dblclick.

How to prevent a double-click from highlighting web-page text using JavaScript?

2 Answers2