css3 user-select 禁止用户选择

测试同学经常提的bug就是说怎么我长按页面上某些文字或者图片,就出现系统的一些黑色弹框,找到我说怎么会这样呢,体验不太好。我就很无语地说,那是浏览器的特性,允许用户去选择某些文字或图片,可进行下一步的操作……


当然是可以通过如下方式禁用:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -ms-user-select: none;
}

下面解释一下各个浏览器内核的属性的属性值介绍:

none :禁止用户选中
text:对用户的选择没有限制
all:目标元素将整体被选中,也就是说不能只选中一部分,浏览器会自动选中整个元素里的内容。

user-select: none|auto|text|contain|all;
//火狐浏览器
-moz-user-select: none|text|all;
//谷歌浏览器
-webkit-user-select: none|text|all
//IE
-ms-user-select: none|text|all|element;

猜你喜欢

转载自blog.csdn.net/u012982629/article/details/80431459