禁止用户选定文本: user-select
双击文本 select,会被选定,如下
但有时点击元素时不想要被选定的状态,有一个尚未成为标准的 CSS 属性: user-select,它有 4 个值:
- text 可以选择文本
- element 可以选择文本,但选择范围受元素边界的约束。
- none 不可以选择文本。
- auto 如果该元素包含可编辑的文本(如输入元素或可编辑内容的元素),则可以选择文本。否则,元素内容是否可选择由父节点的值决定。
目前Firefox/Chrome/IE10+已经支持了,但需要加前缀
.unselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
比如如下文本双击不会被选定
您选定不了我,您选定不了我,您选定不了我,您选定不了我
兼容性:目前除了IE10-,其它浏览器都支持。
相关:
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select
http://blogs.msdn.com/b/ie_cn/archive/2012/01/17/css-user-select.aspx