在某些情况下，阻止网页的某些部分被选中可能是有益的。在这些情况下，您可以尝试使用用户选择CSS属性。
例子
下面是一个类的样式规则disable-selection当应用于HTML元素时，会阻止人们选择元素:
.disable-selection {-moz-user-select:无;/* Firefox */-ms-user-select:没有;/* Internet Explorer */-khtml-user-select:没有;/* KHTML浏览器(例如Konqueror) */-webkit-user-select:没有;/* Chrome, Safari和Opera */-webkit-touch-callout:没有;/*禁用Android和iOS的callouts*/}关于样式规则的一些细节:
-webkit-user-select是Chrome浏览器，Safari浏览器和歌剧)没有必要-o-user-select）- 的无前缀版本
用户选择财产被故意忽略了。 - 的
-webkit-touch-calloutproperty禁用触摸事件期间弹出的标注(在iOS和Android上)。参考下图。
演示
要记住的重要事情
这里有一个陷阱:用户选择是不一个包含在任何W3C规范中的标准CSS属性。虽然用户选择有好的水平吗浏览器支持，使用该属性需要供应商前缀。在前面的示例中，我没有使用无前缀的用户选择属性声明。
这是因为在网络标准的眼中不存在这样的属性。我甚至可以类比用户选择等同于使用CSS的专有属性，如Internet Explorer的属性-ms-filter或-ms-text-kashida-space．其他需要注意的事情:
用户选择是bug和不一致的。有时您仍然可以选择文本，特别是当您开始选择未禁用的UI部分时。- 使用“全选”命令偶尔会包含禁用的文本。(Win: Ctrl + A/Mac: Cmd + A)这种情况在Internet Explorer 11中可以清楚地看到。
- 这种技术并不是阻止用户选择的万无一失的方法。CSS可以很容易地禁用。这种技术依赖于非标准的CSS属性，这意味着未来的web浏览器是否继续支持这种技术存在很大的不确定性。
- 禁用用户选择功能很烦人。我将在渐进式增强的框架内使用此技术:仅在它将增强使用支持的浏览器和设备的用户体验的情况下使用它
用户选择财产。然而，我不会把它分配给一个宽泛的CSS选择器，比如通用的(＊)选择器或身体． - 的
用户选择属性可能使样式表失效。如果标准遵从性对您很重要，则使用此属性可能会在使用验证器测试(如CSS验证服务当设置为其最严格的选项。
浏览器支持
最后更新:2015年3月
| 浏览器 | 版本支持 |
|---|---|
| 铬 | 6 |
| 火狐 | 2 |
| 即 | 10 |
| Safari | 3.1 |
移动
| 浏览器 | 版本支持 |
|---|---|
| 铬(Android) | 2.1 |
| Safari (iOS) | 3.2 |
相关内容
