CSS禁止选中和元素透过

3,565 阅读1分钟

场景

在我们做移动端的时候,会用到一些'联系客服','拨打电话'这样,那样的留资提示,但是移动还的运行环境中会出现点击的时候有可能被认为是选中文本或icons,那么就可以用css阻止下被选中,可以用user-select和pointer-events两种手段的结合

阻止选中和元素透过css代码

  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;

简单介绍

  • webkit-touch-callout
    • 这个CSS属性禁用了默认的callout展示,callout(标注)是指当触摸并按住一个元素的时候出现的提示。
    • 当在iOS上一直按住一个目标元素时,Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。
  • user-select
    • 这是实验中的功能,某些浏览器还在开发中
    • 控制着用户能否选中文本
  • pointer-events
    • 指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。当值为none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
    weblit-touch-callout、、

参考文章

webkit-touch-callout MDN
user-select MDN