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

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

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

Ответ 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();
}

Живой тест.

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

Ответ 2

Просто поместите это в интересующий раздел css

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

Ответ 3

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

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

Ответ 4

В текущем браузере 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>

Ответ 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;
    }
}

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