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

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

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

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

Ответы

Ответ 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/almanac/properties/u/user-select/

Ответ 2

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

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

#id::selection {
background: transparent;
}

Ответ 3

Вы можете:

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

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