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?

Answers:

Answer

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/

Answer

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

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

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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.