JavaScript: Disable text selection via doubleclick

Question

When double-clicking on a html page most browsers select the word you double-click on (or the paragraph you triple-click on). Is there a way to get rid of this behavior?

Note that I do not want to disable regular selection via single-click+dragging; i.e. jQuery UI's $('body').disableSelection() and the document.onselectstart DOM event are not what I want.

Solution 1

I fear you can't prevent the selection itself being "native behavior" of the browser, 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>

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

var _tripleClickTimer = 0;
var _mouseDown = false;

document.onmousedown = function() {
    _mouseDown = true;
};

document.onmouseup = function() {
    _mouseDown = false;
};

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

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

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
};

function RemoveDocumentClick() {
    if (!_mouseDown) {
        document.onclick = null; 
        return true;
    }

    _tripleClickTimer = window.setTimeout(RemoveDocumentClick, 1000);
    return false;
}

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

Live test case.

Should be cross browser, please report any browser where it's not working.

Solution 2

Just put this on the css interested section

 -moz-user-select     : none;
 -khtml-user-select   : none;
 -webkit-user-select  : none;
 -o-user-select       : none;
 user-select          : none;

Solution 3

The following works for me in the current Chrome (v56), Firefox (v51) and MS Edge (v38) browsers.

var test = document.getElementById('test');
test.addEventListener('mousedown', function(e){
    if (e.detail > 1){
        e.preventDefault();
    }
});

<p id="test">This is a test area</p>

The MouseEvent.detail property keeps track of the current click count which can be used to determine whether the event is a double, tripple, or more click.

Internet explorer unfortunately does not reset the counter after a timeout period so instead of getting a count of burst-clicks you get a count of how many times the user has clicked since the page was loaded.

Solution 4

If you really want to disable selection on double-click and not just remove the selection afterwards (looks ugly to me), you need to return false in the second mousedown event (ondblclick won't work because the selection is made onmousedown).

**If somebody wants no selection at all, the best solution is to use CSS user-select : none; like Maurizio Battaghini proposed.

// set to true if you want to disable also the triple click event
// works in Chrome, always disabled in IE11
var disable_triple_click = true;

// set a global var to save the timestamp of the last mousedown
var down = new Date().getTime();
var old_down = down;

jQuery(document).ready(function($)
{
    $('#demo').on('mousedown', function(e)
    {
        var time = new Date().getTime();

        if((time - down) < 500 && 
        (disable_triple_click || (down - old_down) > 500))
        {
            old_down = down;
            down = time;

            e.preventDefault(); // just in case
            return false; // mandatory
        }

        old_down = down;
        down = time;
    });
});

Live demo here

Important notice: I set the sensitivity to 500ms but Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable. - api.jquery.com

Tested in Chrome and IE11.

View more solutions