What is the best way to prevent highlighting of text when clicking on its containing div in javascript?

Question

I am building a menu in HTML/CSS/JS and I need a way to prevent the text in the menu from being highlighted when double-clicked on. I need a way to pass the id's of several divs into a function and have highlighting turned off within them.

So when the user accidentally (or on purpose) double clicks on the menu, the menu shows its sub-elements but its text does not highlight.

There are a number of scripts out there floating around on the web, but many seem outdated. What's the best way?

Answer 1

You could:

• Give it ("it" being your text) a onclick event
• First click sets a variable to the current time
• Second click checks to see if that variable is x time from the current, current time (so a double click over, for example, 500ms, doesn't register as a double click)
• If it is a double click, do something to the page like adding hidden HTML, doing document.focus(). You'll have to experiment with these as some might cause unwanted scrolling.

Answer 2

Hope this is what you are looking for.

<script type="text/javascript">
function clearSelection() {
var sel ;
if(document.selection && document.selection.empty){
document.selection.empty() ;
} else if(window.getSelection) {
sel=window.getSelection();
if(sel && sel.removeAllRanges)
sel.removeAllRanges() ;
}
}
</script>

<div ondblclick="clearSelection()">Some text goes here.</div>

Answer 3

You could use this CSS to simply hide the selection color (not supported by IE):

#id::-moz-selection {
background: transparent;
} 

#id::selection {
background: transparent;
}

Answer 4

In (Mozilla, Firefox, Camino, Safari, Google Chrome) you can use this:

div.noSelect {
  -moz-user-select: none;//mozilla browsers
  -khtml-user-select: none;//webkit browsers
}

For IE there is no CSS option, but you can capture the ondragstart event, and return false;

Answer 5

Wow great tips! Thanks!