在日常运用中,经常遇到点击按钮/菜单的时候,选中了文本,为了避免这种情况,可以使用纯css来解决这个问题(IE10+),对于旧版本的就只能用js:onselectstart = 'return false;'这种方式。以下介绍一下-prefix-user-select:
Formal syntax: none | text | all | element
(-prefix-)user-select: none; //全部都不可选择
(-prefix-)user-select: text; //允许文本选择
(-prefix-)user-select: all; //In an HTML editor, if a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
(-prefix-)user-select: element; //只有IE ff支持,无视……
注意这属性不属于w3c标准!
目前主要使用的是none & text
假定结构如下:
<body> <nav> <dt>level 1</dt> </nav> <p>xxxxxxxxxxxxxxxxxxxx</p> </body>
CSS如下:
body{ -webkit-user-select: none; } nav dt{ -webkit-user-select: text; }
结果是:p标签的文字不能选中,dt的文字则能正常选中。