JavaScript: Disable text selection via doubleclick JavaScript: Disable text selection via doubleclick javascript javascript

JavaScript: Disable text selection via doubleclick


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.


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;


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>