zoukankan      html  css  js  c++  java
  • 手机端取消长按选中

    企业号有一种消息类型叫保密消息,该类型消息有全屏水印、图片水印、禁止分享至朋友圈、禁止选中文字等功能。

    但是对于图片,手机端默认长按时会触发下载保存交互。

    /*-webkit-touch-callout:none; /!* 禁用长触弹出的下载图片菜单 *!/*/
    -webkit-user-select:none; /* 禁用长触选择文字等功能 */

    首先想到的方案是通过JS实现,对touch实践做处理。

    1
    window.ontouchstart = function(e) { e.preventDefault(); };

    但是这个对于长的文章,滚动事件就失效了。所以此方案无效,但是如果只是某个div有需求,可以这样处理。

    其实这个可以通过CSS3的属性去除。

    1
    img { pointer-events: none; }

    如果只是对图片禁止选中,长按图片的时候不会有问题,但是如果是先选择旁边的文字,再覆盖选取图片,那图片照样会被copy出来。

    禁止选中

    1
    2
    -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
    -moz-user-select: none;

    这时候对文字禁止选中就没有问题了,整篇文章不可以复制或保存。截屏的时候会带有水印。

    还有一招更甚,直接

    1
    *{ pointer-events: none; }

    完美实现以上需求,完成。

    企业号有一种消息类型叫保密消息,该类型消息有全屏水印、图片水印、禁止分享至朋友圈、禁止选中文字等功能。

    但是对于图片,手机端默认长按时会触发下载保存交互。

    首先想到的方案是通过JS实现,对touch实践做处理。

    1
    window.ontouchstart = function(e) { e.preventDefault(); };

    但是这个对于长的文章,滚动事件就失效了。所以此方案无效,但是如果只是某个div有需求,可以这样处理。

    其实这个可以通过CSS3的属性去除。

    1
    img { pointer-events: none; }

    如果只是对图片禁止选中,长按图片的时候不会有问题,但是如果是先选择旁边的文字,再覆盖选取图片,那图片照样会被copy出来。

    禁止选中

    1
    2
    -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
    -moz-user-select: none;

    这时候对文字禁止选中就没有问题了,整篇文章不可以复制或保存。截屏的时候会带有水印。

    还有一招更甚,直接

    1
    *{ pointer-events: none; }

    完美实现以上需求,完成。

    禁止点击高亮选中:

    -webkit-tap-highlight-color: rgba(0,0,0,0);  

    -webkit-tap-highlight-color: transparent; /* For some Androids,个人感觉是低版本的安卓,4.0以下 */    

  • 相关阅读:
    【项目管理】WBS工作分解结构
    【代理篇】内网穿透利器——Termite
    【漏洞分析】Discuz! X系列全版本后台SQL注入漏洞
    【代理篇】内网穿透利器——EarthWorm
    【漏洞复现】Apache Solr远程代码执行(CVE-2019-0193)
    【漏洞复现】Apache Solr via Velocity template远程代码执行
    【漏洞复现】PHPStudy后门
    记一次织梦cms渗透测试
    Mybatis源码手记-从缓存体系看责任链派发模式与循环依赖企业级实践
    Dubbo源码手记-服务注册
  • 原文地址:https://www.cnblogs.com/cench/p/5833961.html
Copyright © 2011-2022 走看看