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

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;

Update

Browser support for this property has expanded since 2008.

div.noSelect {   -webkit-user-select: none; /* Safari */   -ms-user-select: none; /* IE 10 and IE 11 */   user-select: none; /* Standard syntax */ } 

https://www.w3schools.com/csSref/css3_pr_user-select.php