JavaScript: отключить выделение текста с помощью двойного щелчка

Question

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

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

Answer 1

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

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

Редактировать : чтобы также не выделять весь абзац «тройным щелчком», вот необходимый код:

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();
}​

Тестовый случай .

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

Answer 2

Просто поместите это в заинтересованный раздел CSS

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

Answer 3

Следующее работает для меня в текущих браузерах 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 отслеживает текущее число кликов , которое можно использовать для определения, является ли событие двойным, тройным или более кликом.

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

Answer 4

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

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

// 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;
    });
});

Демонстрация здесь

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

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

Answer 5

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

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

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