JavaScript: отключить выбор текста с помощью doubleclick

Question

При двойном щелчке на html-странице большинство браузеров выбирают слово, которое вы дважды щелкаете (или абзац, который вы тройной щелчок). Есть ли способ избавиться от этого поведения?

Обратите внимание, что я не хочу отключать регулярный выбор одним нажатием кнопки + перетаскивание; то есть jQuery UI $('body').disableSelection() и событие DOM document.onselectstart не то, что я хочу.

Answer 1

Я боюсь, что вы не можете запретить выбор сам будучи «родным поведение» браузера, но вы можете очистить выбор сразу же после того, как он сделал:

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

Edit: также предотвратить выбор всей пункт по "тройной клик", здесь требуется код:

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.

Должно быть перекрестный браузер, сообщите в любой браузер, где он не работает.

Answer 2

Просто выбросьте это, но вот код, который я удаляю по своим страницам, где я ожидаю, что пользователи будут быстро нажимать. Тем не менее, это также отключит стандартный выбор текста с щелчком мыши.

document.body.onselectstart = function() { 
    return false; 
} 
document.body.style.MozUserSelect = "none"; 
if (navigator.userAgent.toLowerCase().indexOf("opera") != -1) { 
    document.body.onmousedown = function() { 
     return false; 
    } 
} 

Кажется, что хорошо работает для меня.

Answer 3

Просто положи это на CSS интересует раздел

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

Answer 4

Если вы действительно хотите отключить отбор на двойной щелчок, а не просто снять выделение впоследствии (выглядит некрасиво для меня), вам нужно return false во втором событии mousedown (ondblclick не будет работать, потому что выбор сделан на mousedown).

** Если кто-то не хочет выбора вообще, лучшим решением является использование CSS user-select : none;, как предложено Maurizio Battaghini.

// 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

Важное замечание: я установил чувствительность к 500мс но Дважды щелкните чувствительность (максимальное время между щелчками, что детектируется как двойной щелчок) может варьироваться в зависимости от операционной системы и браузера и часто настраивается пользователем. - api.jquery.com

Протестировано в Chrome и IE11.

Answer 5

Следующие работы для меня работают в браузерах Chrome (v56), Firefox (v51) и MS Edge (v38).

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>

Свойство MouseEvent.detail отслеживает current click count, который может быть использован для определения, является ли событие двойной, тройной или более щелчок.

Internet Explorer, к сожалению, не сбрасывает счетчик после периода ожидания, поэтому вместо того, чтобы получать количество всплесков, вы получаете количество попыток щелчка пользователя с момента загрузки страницы.