Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 791
Christopher Tokar Avatar asked Sep 26 '08 12:09

Christopher Tokar


1 Answers

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;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
}

https://css-tricks.com/almanac/properties/u/user-select/

like image 70
scunliffe Avatar answered Oct 01 '22 19:10

scunliffe