手机端取消长按选中

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

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

/*-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以下 */    

转载于:https://www.cnblogs.com/cench/p/5833961.html