我们在项目中常常会遇到一些内容不希望被用户选中,最简便的方法便是css,也可以通过js来实现效果
css使用属性user-select
user-select是一个css属性,控制用户能否选中文本,如果不希望选中可以使用参数none来设置,使用时记得加前缀
body{
-moz-user-select:none; /* 火狐 */
-webkit-user-select:none; /* 谷歌 */
-ms-user-select:none; /* IE */
user-select:none;
}
none
元素及其子元素的文本不可被选中
auto
伪元素计算属性为none,元素可编辑则contain,否则继承父元素的user-select,比如父元素all则all,父元素none则none,都不满足则计算值为text
text
这个理解很简单,用户可以选择文本
all
在HTML编辑器中,当双击子元素或者上下文时,包含该子元素的最顶层元素也会被选中
contain、element
只有IE系列的浏览器支持,允许在元素范围内选择,且只包含该元素内,抛弃IE吧
参照user-select文档学习
js实现不可选中
user-select由于兼容性问题,在旧的浏览器中支持并不好,一些需要不可选的文本我们可以通过js来弥补不足
oncontextmenu
该事件在元素中用户点击鼠标时触发并打开上下文菜单。
onselectstart
该事件是用户在选择文本内容时触发
<div id="target1" oncontextmenu="return false" onselectstart="return false">你选不中我哦</div>
<div id="target2">你还是选不中我哦</div>
<script type="text/javascript">
var target2El = document.getElementById('target2');
target2El.oncontextmenu = function(){
return false;
}
target2El.onselectstart = function(){
return false;
}
</script>
<!-- 这种方法实际上还是有缺陷会被选中的,结合user-select属性可以解决选中问题 -->
考虑到兼容性可以加些判断和鼠标事件
<div id="div-target">增强版选不中</div>
<script type="text/javascript">
var divEl = document.getElementById('div-target');
if(typeof(divEl.onselectstart) != 'undefined'){
divEl.onselectstart = function(event){
if(event.target.tagName != 'INPUT'){
return false;
}
}
}else{ // 如果浏览器没有selectstart事件api就干掉mouse事件
divEl.onmousedown = function(){
if(event.target.tagName != 'INPUT'){
return false;
}
}
divEl.onmouseup = function(){
if(event.target.tagName != 'INPUT'){
return false;
}
}
}
</script>
后续浏览器对Selection兼容更好的时候可以使用相关的API解决问题