How to prevent a double-click from highlighting web-page text using JavaScript?
<p>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.</p>

<pre><code>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.
</code></pre>

<p>Specific questions:</p>

<p>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.)</p>

<p>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?</p>

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

<p>4) Any other idea how to get the desired outcome (double-clicking not selecting and highlighting the text)?</p>

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

<p>Thanks!</p>
