Отмена выделения текста после двойного клика в web-приложении

Быстрый ответ

Используйте следующие CSS-свойства, чтобы предотвратить выделение текста с помощью пользовательского действия:

.no-select { 
  -webkit-user-select: none; /* Chrome, Safari, Opera */       
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Стандартный синтаксис */
}

Добавьте класс .no-select к тем элементам, где вы хотите отключить выделение текста.

Или используйте JavaScript для программного управления выделением текста:

document.addEventListener('mousedown', (event) => {
  // Если есть дополнительные нажатия, например, при двойном клике, предотвратим выделение текста
  if(event.detail > 1 ) {
    event.preventDefault();
  }
});

Таким образом, выделение текста при повторном нажатии будет предотвращено.

Целенаправленное предотвращение выделения: когда это необходимо

Важность нахождения баланса между удобством интерфейса пользователя и его функциональностью не стоит недооценивать. Нежелательное выделение текста может вызвать раздражение, но полное отключение функции выделения может повлиять на пользу от использования интерфейса. Сочетание CSS-свойства user-select с корректным управлением событиями JavaScript позволяет вам проработать выделение в тех областях интерфейса, где это действительно важно.

Пример использования стилей совместно с JavaScript:

element.addEventListener('mousedown', function(event) {
  // Говорим двойному клику "нет"!
  var isDoubleClick = event.detail > 1;
  if(isDoubleClick) {
    if(!event.ctrlKey && !event.shiftKey && !event.altKey) {
      event.preventDefault();
    }
    clearSelection();
  }
});

function clearSelection() {
  if (window.getSelection) {
    window.getSelection().removeAllRanges();
  } else if (document.selection) {
    document.selection.empty();
  }
}

Этот код останавливает выделение текста при двойном нажатии, но при этом оставляет возможность выделения при использовании сочетаний клавиш, например, Ctrl+клик.

Искусство быть невыделяемым

У вас может возникнуть необходимость отключить выделение текста в определённых ситуациях. Владение этим "искусством" дарит некоторые преимущества:

Динамические элементы и статическая защита

При динамическом применении стилей, используйте встроенные стили:

// Этот элемент не позволит себя роскошно выделить
element.style.userSelect = "none";

Подробнее об этом расскажет наш спикер на видео

Старые версии браузеров и свойство unselectable

В прежние времена для Internet Explorer использовалось свойство unselectable:

<div unselectable="on" class="no-select">Этот текст не станет жертвой выделения. Нажмите сколько угодно раз!</div>

Редактируемые элементы и их специфика

Характеристика атрибута contenteditable требует тщательного внимания к вопросу выделения текста в дочерних элементах связанных с ним объектов, поскольку сам по себе атрибут не контролирует эту функцию.

Предотвращение выделения в сложных интерфейсах

В случае динамических и сложных интерфейсов требуются надежные решения:

Делегирование событий

С использованием делегирования событий управляйте событиями mousedown для динамически добавляемых элементов:

document.addEventListener('mousedown', function(event) {
  // Сегодня мы здесь не терпим двойные клики!
  var target = event.target.closest('.no-select');
  if(target && event.detail > 1) {
    event.preventDefault();
  }
});

Такой подход позволяет избежать повторного назначения одного и того же обработчика событий.

Вложенные элементы и наследование стилей

Установите свойство user-select: none для родительского элемента, чтобы все его дочерние элементы наследовали это свойство:

.parent-no-select * { 
  user-select: none; 
}

Событие onselectstart

Применяйте onselectstart для точного контроля над блокировкой выделения:

element.onselectstart = function() { return false; };

Визуализация

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

Для того чтобы сохранить спокойствие в саду при двойном клике:

document.addEventListener('dblclick', function(event){
    event.preventDefault(); // Предупреждаем нежелательный шторм
});

Таким образом, сад останется спокойным и нетронутым: 🌻🌿🌸

Кроссбраузерность и удобство использования

При использовании этих методов следует учитывать совместимость с различными браузерами и удобство использования. Свойство user-select стоит применять с вендорными префиксами для обеспечения максимальной поддержки браузерами. Подумайте также о вариантах использования других клавиш и о доступности решения.

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

@media (min-width: 768px) {
  .selectable-on-desktop { 
    user-select: text; 
  }
}

Полезные материалы

1. Метод preventDefault() событий – MDN — изучите, как предотвратить стандартное поведение событий в JavaScript.
2. Свойство user-select – CSS-Tricks — подробнее о свойстве user-select, которое контролирует выделение текста.
3. Как отключить выделение текста – Stack Overflow — обсуждение способов отключить выделение текста.
4. Введение в события браузера – JavaScript.info — простое введение в события DOM в JavaScript.
5. События JavaScript – W3Schools — гайд по событиям в JavaScript.
6. preventDefault() против return false – Stack Overflow — дискуссия о использовании preventDefault по сравнению с возвратом false.
7. user-select в CSS – MDN — официальная документация MDN по свойству user-select.