在 javascript 中单击其包含的 div 时防止突出显示文本的最佳方法是什么？

Question

我正在用 HTML/CSS/JS 构建一个菜单，我需要一种方法来防止菜单中的文本在双击时突出显示。我需要一种方法将几个 div 的 id 传递到一个函数中，并在其中关闭突出显示。

因此，当用户不小心（或故意）双击菜单时，菜单会显示其子元素，但其文本不会突出显示。

网络上流传着许多脚本，但许多似乎已经过时。最好的方法是什么？

原文由 Christopher Tokar 发布，翻译遵循 CC BY-SA 4.0 许可协议

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; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

https://www.w3schools.com/csSref/css3_pr_user-select.php

原文由 scunliffe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用此 CSS 来简单地隐藏选择颜色（IE 不支持）：

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

#id::selection {
  background: transparent;
}

原文由 Joe Lencioni 发布，翻译遵循 CC BY-SA 4.0 许可协议