代码之家 › 专栏 › 技术社区 › Christopher Tokar

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

css html javascript

Christopher Tokar · 技术社区 · 17 年前

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

因此,当用户意外(或故意)双击菜单时,菜单会显示其子元素,但其文本不会突出显示。

网上流传着许多脚本,但其中许多似乎已经过时。最好的办法是什么?

4 回复 | 直到 17 年前

Will Reese kizu 11 年前

在(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

Joe Lencioni 17 年前

您可以使用此CSS简单地隐藏选择颜色(IE不支持):

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

#id::selection {
  background: transparent;
}

Oli 17 年前

您可以:

给它(“it”是你的文本)一个点击事件
第一次单击将变量设置为当前时间
第二次单击会检查该变量是否为当前时间的x倍(因此双击,例如500ms,不会注册为双击)
如果是是双击,对页面执行一些操作,比如添加隐藏的HTML,执行document.focus()。你必须尝试这些,因为有些可能会导致不必要的滚动。

Vijesh VP 17 年前

希望这就是你要找的。

<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>

推荐文章