当在javascript中点击其包含的div时，防止文本突出显示的最好方法是什么？ [英] What is the best way to prevent highlighting of text when clicking on its containing div in javascript?

问题描述

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

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

有很多脚本在网上漂浮，但很多似乎过时了。

解决方案

在（Mozilla，Firefox，Camino，Safari，Google Chrome）中，您可以使用：

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

对于IE没有CSS选项，可捕获ondragstart事件并返回false;

更新

浏览器支持

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

I am building a menu in HTML/CSS/JS and I need a way to prevent the text in the menu from being highlighted when double-clicked on. I need a way to pass the id's of several divs into a function and have highlighting turned off within them.

So when the user accidentally (or on purpose) double clicks on the menu, the menu shows its sub-elements but its text does not highlight.

There are a number of scripts out there floating around on the web, but many seem outdated. What's the best way?

解决方案

In (Mozilla, Firefox, Camino, Safari, Google Chrome) you can use this:

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

For IE there is no CSS option, but you can capture the ondragstart event, and return false;

Update

Browser support for this property has expanded since 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/

这篇关于当在javascript中点击其包含的div时，防止文本突出显示的最好方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！