CSS&JS指定元素不可被选中方法

一、CSS3的解决方法:user-select:

body{
  -webkit-user-select: none;  /* Chrome / Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* IE 10+ */

  user-select: none;          
}

ser-select属性:auto:默认,可以选中。|| none:不可选; ||text:只可选文本; || all:父级;

目前浏览器对”user-select”属性支持情况:

Chrome Safari Firefox Opera IE
× 10+

二、考虑浏览器兼容问题,也可以用JS来解决这个问题;

	
//事件开始,不可选中;
document.onselectstart = function(){ return false; }
//事件结束,可选中;
document.onselectstart = null;

Jquery实例:

	
$("body").hover(function(){
	document.onselectstart = function(){
		return false;
	}		
},function(){document.onselectstart = null;})

三、HTML方法,直接给标签onselectstart:

<body onselectstart="return false">
 

:)
There is one more thing
想用这个方法来保护内容不被复制(不被选中+禁止右键)是不靠谱的。但是在双击、拖放事件中却非常重要。



发表评论

电子邮件地址不会被公开。 必填项已用*标注