Как отменить выделение текста после первого события mousedown?

Question

Я пытаюсь реализовать всплывающее меню, основанное на щелчке и удерживании, расположенное так, чтобы (действительно) медленный щелчок по-прежнему вызывал действие по умолчанию, и с задержкой, установленной так, чтобы выделение текста жест обычно не вызывает меню.

То, что я не могу сделать, это отменить выделение текста таким образом, чтобы не помешать выделению текста, во-первых: возврат false из обработчика события (или вызов $(this).preventDefault()) не позволяет пользователю выбор вообще, и очевидное $().trigger('mouseup') ничего не делает с выбором вообще.

• Это общий контекст страницы, не относящийся к текстовой области или другому текстовому полю.
• e.stopPropogation() не отменяет выделение текста.
• Я не хочу предотвращать выделение текста, а скорее вето их через некоторый короткий промежуток времени, если выполняются определенные условия.

Answer 1

Попробуйте это:

var input = document.getElementById('myInputField');
if (input) {
    input.onmousedown = function(e) {

        if (!e) e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();

    }
}

А если нет, прочитайте:

http://www.quirksmode.org/js/introevents.html

Answer 2

В дополнение к главной теме, есть официальный способ реализовать то, что, я думаю, вам нужно в DOM. Вместо событий вы можете использовать объект диапазона.

Рассмотрим, (который работает окончательно на FF3)

window.onclick = function(evt)
{
   // retrieves the selection and displays its content
   var selectObj = window.getSelection();
   alert(selectObj);

   // now collapse the selection to the initial point of the selection
   var rangeObj = selectObj.getRangeAt(0);
   rangeObj.collapse(true);
}

К сожалению, это не совсем так с IE, Opera, Chrome или Safari; не знаю почему, потому что в Opera, Chrome или Safari есть что-то связанное с методами collapse и getRangeAt. Если я узнаю больше, я дам вам знать.

---

Обновление моего предыдущего ответа, более универсального из которых - это методы выбора объекта и коллапса, collapseToStart, collapseToEnd ( текст ссылки )

Теперь рассмотрим 2.0 из вышеперечисленного:

window.onmouseup = function(evt)
{
   var selectObj = window.getSelection();
   alert(selectObj); // to get a flavor of what you selected

   // works in FF3, Safari, Opera, and Chrome
   selectObj.collapseToStart();

   // works in FF3, Safari, Chrome (but not opera)
   /* selectObj.collapse(document.body, 0); */

   // and as the code is native, I have no idea why...
   // ...and it makes me sad
}

Answer 3

Я не уверен, поможет ли это точно, но вот код для отмены выбора текста:

// onselectstart is IE-only
if ('undefined' !== typeof this.onselectstart) {
    this.onselectstart = function () { return false; };
} else {
    this.onmousedown   = function () { return false; };
    this.onclick       = function () { return true;  };
}

«this» в этом контексте будет элементом, для которого вы хотите запретить выделение текста.

Answer 4

Спасибо рыцарю за начало универсального решения. Эта небольшая модификация также включает поддержку IE 7-10 (и, вероятно, 6).

У меня была такая же проблема, как и у cwillu-gmail. Мне нужно было присоединиться к событию shift-click (щелкнуть метку, удерживая клавишу Shift), чтобы выполнить некоторые альтернативные функции в определенном режиме «design». (Да, звучит странно, но это то, что хотел клиент.) Эта часть была легкой, но вызывала раздражающий эффект выделения текста. Это сработало для меня: (Я использовал onclick, но вы можете использовать onmouseup .. зависит от того, что вы пытаетесь сделать и когда)

var element = document.getElementById("myElementId");
element.onclick = function (event)
{
    // if (event.shiftKey) // uncomment this line to only deselect text when clicking while holding shift key
    {
        if (document.selection)
        {
            document.selection.empty(); // works in IE (7/8/9/10)
        }
        else if (window.getSelection)
        {
            window.getSelection().collapseToStart(); // works in chrome/safari/opera/FF
        }
    }
}

Answer 5

Ответ на этот вопрос у меня работает: Как отключить выделение текста с помощью jquery?

(Он не только отключает, но и отменяет любой выделенный текст.
По крайней мере, на моем компьютере в FF и Chrome.)

Вот что делает ответ:

    .attr('unselectable', 'on')

    '-ms-user-select': 'none',
    '-moz-user-select': 'none',
    '-webkit-user-select': 'none',
    'user-select': 'none'

    .each(function() {  // for IE
      this.onselectstart = function() { return false; };
    });

Answer 6

$(this).focus() (или что-то в этом роде document.body.focus()), кажется, делает трюк, хотя я не проверял это намного дальше ff3.