disable text highlighting on double click in jQuery

Question

I have this jQuery toggle. It work fine.

   <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
  </ul>

        $("li").toggle(
          function () {
            $(this).css({"list-style-type":"disc", "color":"blue"});
          },
          function () {
            $(this).css({"list-style-type":"disc", "color":"red"});
          },
          function () {
            $(this).css({"list-style-type":"", "color":""});
          }
        );

The problem is when I do fast clicking, it highlighted the text in it. Is there a way to stop the text from being highlighted?

What do you mean by "highlighted"? Is text selected in the list item if you click during the toggle? — Residuum, Jan 25 '10 at 12:35
Just try to double click a text... You will see what I mean... the text will be selected(highlighted)... I don't want the text to be selected... — Reigel Gallarde, Jan 25 '10 at 12:39
http://stackoverflow.com/questions/880512/prevent-text-selection-after-double-click — Aristoteles, Aug 12 '13 at 14:52
Note that the question reference by @Aristoteles above has an answer that works correctly (albeit not the accepted one), unlike this question. Have voted to close on that basis. — Jules, Aug 07 '15 at 08:37

David Thomas · Accepted Answer · 2011-01-21T18:21:14.977

54

I'm writing on iPhone, while away from the desk, but a quick Google turned up this page: disable text selection with jQuery.

Edited in response to the 'dead link' comment (from @Herb Caudill). While the original link is, indeed, dead, it appears to be due to a site restructuring (rather than removal) and the new location for the article can be found here: http://chris-barr.com/index.php/entry/disable_text_selection_with_jquery/

And the code provided in that article is reproduced below:

$(function(){
    $.extend($.fn.disableTextSelect = function() {
        return this.each(function(){
            if($.browser.mozilla){//Firefox
                $(this).css('MozUserSelect','none');
            }else if($.browser.msie){//IE
                $(this).bind('selectstart',function(){return false;});
            }else{//Opera, etc.
                $(this).mousedown(function(){return false;});
            }
        });
    });
    $('.noSelect').disableTextSelect();//No text selection on elements with a class of 'noSelect'
});

jQuery snippet written by Chris Barr, of chris-barr.com, as accessed on Friday, 21^st of January, 2011.

edited Jan 21 '11 at 18:21

answered Jan 25 '10 at 12:38

David Thomas

249,100
51
377
410

1

This link is broken, can anyone enlighten us as to what the solution was? – Herb Caudill Jan 21 '11 at 14:58
@Herb Caudill, please see the edit (after the `hr`) which links to the new location for the same article, and also includes the relevant jQuery here (with as much citation as I could offer, if @Chris Barr wants to contest its inclusion here I will, of course, remove it from the answer). – David Thomas Jan 21 '11 at 18:22
7

$.browser is deprecated, and binding to an event unsupported by the browser does no evil anyway. So I recommend simply binding “selectstart”, “click” and “mousedown” to a function returning false. This also works in Mozilla, the CSS property MozUserSelect is not needed. – scy Apr 11 '11 at 13:37
Nice piece of code. Worked like charm. – vinczemarton Jan 30 '12 at 12:36
1

For me, a quick Google turned up *this* page. – Stephen Jun 24 '12 at 11:17
@DavidThomas, may I request you to have a look at a jquery question on a different topic here : http://stackoverflow.com/questions/13137404/jquery-find-div-class-name-at-a-certain-position-while-scrolling ? – Istiaque Ahmed Oct 31 '12 at 09:11
2

This prevents any text selection, like click/drag to highlight – Madbreaks Dec 13 '13 at 23:42
2

+1 to @madbreaks comment - this does not answer the question asked; it prevents *all* text selection, not just selection on double click. – Jules Aug 07 '15 at 08:33
This is clearly not an answer to the question. – Dávid Horváth Feb 14 '16 at 02:24
@DávidHorváth: it's been over five years since I wrote this, could you explain in what way it's "*clearly not an answer*"? – David Thomas Feb 14 '16 at 02:26
@DavidThomas Sorry. I am trying to find a solution to this problem **now**, and I have not notice creation time of your answer. IMO, correct answer whould be a description of a method to prevent the browser from build a selection on doubleclick (okay, question is also unclear, for example "highlight" is not "selection"). This is my opinion, sorry again; however, you have even enough likes on this post. – Dávid Horváth Feb 14 '16 at 02:46
You don't have to apologise, I was just curious as to your reasoning. Thank you for taking the time to explain. – David Thomas Feb 14 '16 at 02:48

score 37 · Answer 2 · answered Mar 25 '13 at 15:39

37

I solved this using the non-standard CSS keyword user-select:

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

answered Mar 25 '13 at 15:39

Sjoerd

74,049
16
131
175

None of the solutions work for me except for you answer, thanks – Andrew Liu Nov 25 '13 at 06:37
This is the simplest and best answer as far as I can see. Note the standardised version should also be used: `user-select: none;` – andrewmu Apr 21 '17 at 10:08
1

This prevents any selection, not simply double-click selection. – Lawrence Dol May 27 '21 at 01:49

score 36 · Answer 3 · answered Apr 24 '12 at 15:23

36

If you use jQuery UI you can disable text selection as simple as that:

$("body").disableSelection();

answered Apr 24 '12 at 15:23

VisioN

143,310
32
282
281

6

Gotta love jQuery UI :) thanks! – Richard de Wit Aug 31 '12 at 07:30
3

Simple & does the trick. Thanks! The browser detection approach has been removed in jQuery 1.9. – sirthomas Jan 31 '13 at 05:54

score 10 · Answer 4 · answered Jan 25 '10 at 12:36

10

//function to be reused later
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() ;
  }
}

$('p').click(clearSelection);

Source

answered Jan 25 '10 at 12:36

Alex Bagnolini

21,990
3
41
41

Thanks... this did the trick... but ricebowl's suggestion is better... I'll just give you +1. – Reigel Gallarde Jan 25 '10 at 12:43

nonzaprej · Answer 5 · 2019-04-15T14:13:58.487

7

I had the same problem and this worked for me:

li.noselection::selection {
    background-color: transparent;
}

I tested it on Chrome, Firefox, EDGE and IE from 7 to 10.

P.S. This only disables the "visual effect", the text still gets selected. I hope that's why this got downvoted, because if your problem is only esthetical this solution works 100%.

edited Apr 15 '19 at 14:13

answered May 13 '15 at 10:10

nonzaprej

1,322
2
21
30

Thanks. This was the perfect solution for me. – RaneWrites Mar 22 '17 at 11:45

Lahmizzar · Answer 6 · 2013-10-21T23:47:42.947

5

To work with jQuery version above 1.9.x

HTML

The html markup as shown above:

<ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
</ul>

JS

Use preventDefault() instead of return false which doesn't kill any other handlers you might have

$('li').on('selectstart', function (event) {
    event.preventDefault();
});

Example: jsFiddle

edited Oct 21 '13 at 23:47

answered Oct 21 '13 at 23:42

Lahmizzar

487
6
6

1

This prevents *any* text selection, like click/drag to highlight – Madbreaks Dec 13 '13 at 23:39
This prevents only text selection for _ul > li_ text. Please have a look at the fiddle for testing – Lahmizzar Dec 14 '13 at 01:49

score 0 · Answer 7 · answered Mar 24 '13 at 07:58

$( 'selector' ).on( 'selectstart', 'selector', function( ) { 
  return false; 
}).css( 'MozUserSelect','none' ).mousedown( function( ) {
  return false;
});

replace the selector with your own - this code works fine on all browsers. Using .on() for elements inserted dynamically to the DOM

score 0 · Answer 8 · answered Sep 09 '13 at 15:41

0

document.onselectstart = function() { return false; }
document.onmousedown = function() { return false; }

answered Sep 09 '13 at 15:41

Mike Furlender

3,869
5
47
75

1

This prevents any text selection, like click/drag to highlight – Madbreaks Dec 13 '13 at 23:39

score 0 · Answer 9 · answered Aug 02 '11 at 23:20

0

window.getSelection().empty()

works fine in Chrome, albeit with a quick flash of the selection, which is ugly.

answered Aug 02 '11 at 23:20

tim

433
1
6
8

disable text highlighting on double click in jQuery

9 Answers9

jQuery snippet written by Chris Barr, of chris-barr.com, as accessed on Friday, 21^st of January, 2011.

Linked

Related

disable text highlighting on double click in jQuery

9 Answers9

jQuery snippet written by Chris Barr, of chris-barr.com, as accessed on Friday, 21st of January, 2011.

Linked

Related

jQuery snippet written by Chris Barr, of chris-barr.com, as accessed on Friday, 21^st of January, 2011.