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

js、css设置不可选中用法_第1张图片

你可能感兴趣的:(学习,css,js,user-select,onselectstart,js设置不可选,css设置不可选)