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?

I had a similar question and found this useful: http://stackoverflow.com/questions/3169786/clear-text-selection-with-javascript — , Mar 25 '12 at 14:15

score 25 · Accepted Answer · edited Nov 22 '22 at 00:35

25

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

edited Nov 22 '22 at 00:35

astasiak

790
1
6
13

answered Sep 27 '08 at 02:42

scunliffe

62,582
25
126
161

1

Is mozilla its own browser? :) – CoderOfHonor May 10 '13 at 21:59
Mozilla is the internal name for the rendering engine inside "Mozilla Firefox" as well as Camino, and the base Mozilla browser... and well Netscape before that. So yes Mozilla is its own browser but it really is best known as the rendering engine used in Firefox. – scunliffe May 12 '13 at 02:17

score 4 · Answer 2 · edited Aug 27 '20 at 13:49

4

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

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

#id::selection {
  background: transparent;
}

edited Aug 27 '20 at 13:49

Ritu

714
6
14

answered Sep 26 '08 at 20:56

Joe Lencioni

10,231
18
55
66

score 1 · Answer 3 · answered Sep 26 '08 at 12:39

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.

answered Sep 26 '08 at 12:39

Oli

235,628
64
220
299

1

If you're trying to do this as a soft-DRM, please drop the idea! People could do control+a or just read the source. – Oli Sep 26 '08 at 12:41
Thanks, but I know there must be a more elegant solution. The scripts out there now that work do not use timers. – Christopher Tokar Sep 26 '08 at 12:56

score 0 · Answer 4 · edited Aug 27 '20 at 13:51

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>

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

4 Answers4

Linked

Related