js、css设置不可选中用法

我们在项目中常常会遇到一些内容不希望被用户选中，最简便的方法便是css，也可以通过js来实现效果

1. 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文档学习

2. 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>

考虑到兼容性可以加些判断和鼠标事件

<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解决问题