События мыши: отмена выделения

События мыши: отмена выделения

Здравствуйте! В продолжении темы «События мыши»  сегодня  я хочу поговорить об отмене выделения текста, когда пользователь 2 раза кликает на текст.  Дело в том, что у кликов мыши есть  одна неприятная особенность.

2-ой клик или нажатие с движением курсора приводят к  выделению текста.

Если вы  желаете  обрабатывать эти все  события сами, то такое выделение –  конечно некрасиво и неудобно. В этом уроке  мы с вами  разберем основные способы, как сделать элемент, чтобы он не выделялся.

 

события мыши. Отмена выделения текста

Способ 1: отмена mousedown/selectstart

Все дело в том, что  браузер выделяет текст при движении мышью с зажатой левой кнопкой , а также при 2-ом клике на элемент.  Даже там, где это не нужно.

Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является выделение текста браузером.

<span ondblclick="alert('двойной клик!')">Текст</span>

Чтобы предотвратить выделение, надо отменить действие браузера по умолчанию для события mousedown.

А вот полный код элемента, который собственно и  обрабатывает 2-ой клик без выделения:

<span ondblclick="alert('Тест click')" onselectstart="return false" onmousedown="return false"> Двойной клик сюда выведет "Тест", без выделения </span>

При установке на родительский элемент  – все его вложенные элементы станут невыделяемыми:

Элементы списка не  будут выделяться при клике:
<ul onmousedown="return false" onselectstart="return false">
  <li>Винни-Пух</li>
  <li>Ослик Иа</li>
  <li>Мудрая Сова</li>
  <li>Кролик Иа</li>
</ul>
Но выделение, всё же, возможно

Отмена действия браузера при событиях mousedown/selectstart отменит выделение при клике, но не запретит его полностью.

Если пользователь всё же захочет выделить текстовое содержимое элемента, то он может совершить это.

Просто достаточно начать выделение не на самом элементе, а непосредственно рядом с ним. Ведь там-то отмены не произойдёт, и выделение начнётся, а дальше можно передвинуть мышь уже на сам элемент.

Читайте также  Всплытие и перехват событий

Способ 2: снятие выделения после того как событие уже  произошло

Можно вместо предотвращения выделения, просто снять в обработчике события, после того, как оно событие уже произошло.

Для этого мы используем методы работы с выделением, которые описаны в отдельном уроке  Выделение: Range, TextRange и Selection. Здесь нам пригодится всего лишь одна функция clearSelection, которая и  будет снимать выделение.

Вот пример со снятием выделения при двойном клике на элемент из  списка:

<ul>
  <li ondblclick="clearSelection()">Выделение отменяется при двойном клике.</li>
</ul>

<script>
  function clearSelection() {
    if (window.getSelection) {
      window.getSelection().removeAllRanges();
    } else { // старый IE
      document.selection.empty();
    }
  }
</script>

У этого подхода есть 2 особенности, на которые и стоит обратить внимание:

  • Выделение всё же производится, но тут же снимается. Это выглядит как мигание и конечно не очень красиво.
  • Выделение при помощи передвижения зажатой мыши работает, так что пользователь имеет возможность выделить и содержимое элемента.

Способ 3: свойство user-select

Есть нестандартное CSS-свойство user-select, которое и делает элемент невыделяемым.

Его когда-то хотели включить в стандарт CSS3, потом от него успешно отказались, но поддержка в браузерах все же осталась.

Это свойство работает (с префиксом) везде, кроме естественно IE9-:

<style>
  b {
    -webkit-user-select: none;
    /* user-select -- это нестандартное свойство */

    -moz-user-select: none;
    /* поэтому нужны префиксы */

    -ms-user-select: none;
  }
</style>

Строка до..
<div ondblclick="alert('Тест')">
  <b>Этот текст нельзя выделить (кроме IE9-)</b>
</div>
.. Строка после

Итого

Для отмены выделения  при клике мышью есть несколько способов:

  1. CSS-свойство user-select – везде  ( префикс, нестандарт).
  2. Отмена действий на  события mousedown и selectstart:
    elem.onmousedown = elem.onselectstart = function() {
      return false;
    };
  1. Отмена выделения после того, как событие уже произошло через функцию clearSelection().

Какой же способ выбирать?

Это зависит от конкретных задач и вашего собственно удобства, а также конкретного случая. Все способы в принципе работающие.
В любом случае эти способы не предназначены для защиты от выделения-и-копирования.
Ну а если  вам уж хочется запретить копирование –  то можно использовать событие oncopy:

<div oncopy="alert('Копирование запрещено');return false">
  Этот текст нельзя скопировать
</div>
Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: