pointer-events与禁止长按保存图片
pointer-events:none（默认为auto）的作用是让元素实体“虚化”。鼠标/触摸事件将“穿透”该元素并指定该元素“下面”的任何东西。
如果我们在body标签上应用该CSS声明，则整个页面（如果内部没有其他pointer-events设置）就像是一个背景图片的存在。不能选不能点不能响应hover。
- 减少滚动时触发hover事件等不必要的渲染。
- 屏蔽手机端的长按图片保存功能
- 无法屏蔽双指缩放、选中文本
touch-acion与禁用双指缩放
meta标签禁用双指缩放(手机端)
对手机端有效,但对PC端无效
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
阻止默认事件
但有些浏览器不把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;
}
