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

7ivaypg9  于 2022-11-27  发布在  Java
关注(0)|答案(4)|浏览(86)

我正在用HTML/CSS/JS构建一个菜单,我需要一种方法来防止菜单中的文本在双击时被高亮显示。我需要一种方法来将几个div的id传递到一个函数中,并在其中关闭高亮显示。
因此,当用户意外(或故意)双击菜单时,菜单会显示其子元素,但其文本不会突出显示。
有很多脚本在网上流传,但很多看起来都过时了。最好的方法是什么?

mhd8tkvw

mhd8tkvw1#

在(Mozilla,Firefox,Camino,Safari,谷歌浏览器)中,您可以使用此:

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

8ehkhllq

8ehkhllq2#

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

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

#id::selection {
  background: transparent;
}
lndjwyie

lndjwyie3#

您可以:

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

snvhrwxg4#

希望这是你要找的。

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

相关问题