CSS -- 禁止用户选择
网站会有一些简单的保密需求,不想让用户复制文字,或者轮播图到头了,左右箭头还在点点点,会有蓝色的背景,使用下面的css就可以解决这种问题。
CSS
/* 禁止长按保存图片 */
img {
pointer-events:none;
}
/* 禁止复制文本 */
*:not(input,textarea){
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.select-text {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text
}
.select-all {
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all
}
.select-auto {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto
}
js(兼容IE6-9)
document.body.onselectstart=document.body.ondrag=function(){
return false;
}
document.addEventListener('contextmenu', function(e){
e.preventDefault(); // 阻止默认右键菜单行为
})
document.addEventListener('selectstart', function(e){
e.preventDefault();
})