How to prevent the double-click select text in Javascript

Question

Say I have an ul (li) list in the page:

<ul>
 <li>xxx<li>
 <li>xxx<li>
</ul>

The element li are clickable and double-clickable, they are attached with these events, and I return false in both of them.

$('ul li').on('click',function(){
    //do what I want
    return false;
}).on('dblclick',function(){
    //do what I want
    return false;
});

But when the user double-clicks the element, the text inside the li will be selected. How can this be prevented?

Update:

Solved now,I use the following code with the css selector by NiftyDude:

$('ul li').on('click',function(){
    //do what I want
    return false;
}).....on('dragstart',function(){return false;}).on('selectstart',function(){return false;});

As a side note, you probably want to use e.preventDefault() instead of return false. — Andrew Marshall
– Andrew Marshall, Commented Apr 17, 2012 at 3:16
It's not supposed to be a solution, it's just something that you should know and do. — Andrew Marshall
– Andrew Marshall, Commented Apr 17, 2012 at 3:33
return false; is the same as calling both preventDefault() and stopPropagation() on the event handler arg. Perhaps the best thing to do, though, would be to just pass false directly: /*....*/.on('dragstart selectstart', false); — AndrewF
– AndrewF, Commented Nov 4, 2013 at 8:22

Andreas Wong · Accepted Answer · 2012-04-17 03:13:33Z

21

You can disable text selection using css (Note that this will effectively disable all selection methods and not just double clicking)

ul li {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

http://jsfiddle.net/T3d7v/1/

answered Apr 17, 2012 at 3:13

Andreas Wong

60.7k19 gold badges112 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andrew Marshall Over a year ago

Note that this will disable all selection methods, not just double clicking.

Andreas Wong Over a year ago

@AndrewMarshall Thanks Mr. Marshall :)

Andreas Wong Over a year ago

@hguser which version of ie? 6/7?

grepsedawk · Accepted Answer · 2012-04-17 03:38:50Z

3

You can't stop the select from happening but you can clear the selection right after it's made:

<script type="text/javascript">
document.ondblclick = function(evt) {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}
</script>

To also prevent selecting whole paragraph by "triple click", here is the required code:

var _tripleClickTimer = 0;
document.ondblclick = function(evt) {
    ClearSelection();
    window.clearTimeout(_tripleClickTimer);

    //handle triple click selecting whole paragraph
    document.onclick = function() {
        ClearSelection();
    };

    _tripleClickTimer = window.setTimeout(function() {
           document.onclick = null; 
    }, 1000);
};

function ClearSelection() {
    if (window.getSelection)
        window.getSelection().removeAllRanges();
    else if (document.selection)
        document.selection.empty();
}

Source/Live test.

This should work on any browser, please report any browser where it's not working.

answered Apr 17, 2012 at 3:38

grepsedawk

3,4142 gold badges28 silver badges49 bronze badges

3 Comments

grepsedawk Over a year ago

Yes, but then I would say you must re-word your question. If you notice, you are unable to select the test due to double (and triple) click... Which is EXACTLY what you wanted...

hguser Over a year ago

Oh,My mistake. I thought it can prevent the dbl-select and select. It works. Thank you.

grepsedawk Over a year ago

would you like something that prevents select as well?

Collectives™ on Stack Overflow

How to prevent the double-click select text in Javascript

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related