长按保存图片、禁用双指缩放、选中文本等

pointer-events与禁止长按保存图片

pointer-events:none（默认为auto）的作用是让元素实体“虚化”。鼠标/触摸事件将“穿透”该元素并指定该元素“下面”的任何东西。

如果我们在body标签上应用该CSS声明，则整个页面（如果内部没有其他pointer-events设置）就像是一个背景图片的存在。不能选不能点不能响应hover。

• 减少滚动时触发hover事件等不必要的渲染。
• 屏蔽手机端的长按图片保存功能
• 无法屏蔽双指缩放、选中文本

touch-acion与禁用双指缩放

meta标签禁用双指缩放(手机端)

对手机端有效,但对PC端无效

阻止默认事件

但有些浏览器不把touch类事件当作默认事件,所以无法禁用
可用于微信web中禁止弹性下拉，部分浏览器也会阻止页面滚动等事件

document.body.addEventListener('touchmove', function(event) {
  event.preventDefault();
}, false); 

在chrome浏览器中禁用缩放/翻译/下一页等的设置(PC端)

查看配置方式

设置 * { touch-acion : none }

语法 :
touch-acion: auto | none | [ [ [ pan-x || pan-y || pinch-zoom ? ] | manipulation ] || double-tap-zoom ? ]

• auto：
  默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
• none：
  禁止触发默认的手势操作。
• pan-x：
  可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
• pan-y：
  可以在父级元素内进行垂直移动的手势操作。
• manipulation：
  允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。

注：touch-action只支持具有CSS width和height属性的元素。这个限制的目的是帮助浏览器优化低延时的手势操作。对于默认不支持此属性的元素，如这种内联元素，可以给它设置display:block这样的CSS属性来支持width和height。未来W3C规范会将此API扩展到支持所有元素。

禁止选中文本

会导致IOS的微信web中input无法输入

* {
    /*禁止IOS的Safar浏览器中长按唤起系统菜单*/
    -webkit-touch-callout: none;
    /*阻止ios下点击区域变暗*/
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}
:not(input) {
    /*禁止长按选中，会导致IOS的input无法输入*/
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}