Каков наилучший способ предотвратить выделение текста при нажатии на содержащий его div в javascript?

Question

Я создаю меню в HTML / CSS / JS, и мне нужен способ предотвратить выделение текста в меню при двойном щелчке по нему. Мне нужен способ передать идентификаторы нескольких div в функцию и отключить подсветку внутри них.

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

В Интернете существует множество сценариев, но многие кажутся устаревшими. Какой лучший способ?

Answer 1

В (Mozilla, Firefox, Camino, Safari, Google Chrome) вы можете использовать это:

div.noSelect {
  -moz-user-select: none; /* mozilla browsers */
  -khtml-user-select: none; /* webkit browsers */
}

Для IE нет опции CSS, но вы можете захватить событие ondragstart и вернуть false;

Обновление

Поддержка браузера для этого свойства расширена с 2008 года.

div.noSelect {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
}

https://css -tricks.com / альманах / свойства / и / пользователем выберите /

Answer 2

Вы можете использовать этот CSS, чтобы просто скрыть выделенный цвет (не поддерживается IE):

#id::-moz-selection {
background: transparent;
} 

#id::selection {
background: transparent;
} 

Answer 3

Вы могли бы:

• Дайте ему (это будет вашим текстом) событие onclick
• Первый щелчок устанавливает переменную на текущее время
• Повторный щелчок проверяет, равна ли эта переменная x времени от текущего, текущего времени (поэтому двойной щелчок, например, 500 мс, не регистрируется как двойной щелчок)
• Если это - это двойной щелчок, сделайте что-нибудь на странице, например, добавив скрытый HTML, выполнив document.focus (). Вам придется поэкспериментировать с ними, так как некоторые могут вызвать нежелательную прокрутку.

Answer 4

Надеюсь, это то, что вы ищете.

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

<div ondblclick="clearSelection()">Some text goes here.</div>