mobile_点透_传透_touch-action
点透（传透）
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
PC 的 click 事件 在移动端，会有 300 ms 的延迟。就是因为避免和手机双击行为发生冲突
- 点透现象：（面试题）
- 轻轻触碰 box ，box 消失
当点击 非文字覆盖区域 时，盒子正常消失。
当点击 文字区域时，页面发生跳转。
- 理想情况：
无论点击哪个区域，只要是点击盒子，盒子都消失，而不影响 a
- 解决方案1：（面试阐述）
click 事件监听，
缺点： PC 端的 click 事件 在 移动端有 300 ms 的延迟
- 解决方案2（模拟器测试无效, 移动端有效）：
① 让 a 元素不能跳转，即取消浏览器的默认行为
-
document.addEventListener("touchstart", function(e){ e.preventDefault(); }, false);
② box 盒子消失，点击 a 元素，a 应该跳转，即给 a 元素指定一个全新的跳转动作
-
// 点透（传透） (function(){ // 1. 取消默认行为 document.addEventListener("touchstart", function(e){ e.preventDefault(); }, false); var aNodes = document.querySelectorAll('a'); for (var i=0;i<aNodes.length;i++) { aNodes[i].addEventListener('touchstart',function(){ window.location = this.href; // 2. 获取 a 的跳转地址, 交给 window 实现跳转 }, false); }; })(); /**** 模拟器测试无效, 实际测试有效 window.location 是一个只读对象，所有字母必须小写 但是仍然可以赋予一个对象 DOMString 两种写法，效果一致 window.location = "https://www.baidu.com"; window.location.href = "https://www.baidu.com"; ****/
关于浏览器报错
-
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See…
是因为在取消浏览器默认行为后，浏览器将触屏事件识别为被动，而报错
- 需求：
会影响交互操作，例如，自定义滚动，或者元素拖拽效果等，
会触发浏览器原生的滚动，产生不好的交互体验效果
- 解决：
1. 加入 css //
-
html { touch-action: none; }
缺点：
- iOS Safari浏览器不支持
- 干掉了可能需要的原生的touch相关行为
2. 直接传递 {passive:false} ，告诉浏览器是主动要求阻止默认行为的，解决 treated as passive 错误
-
document.addEventListener("touchstart", function(e){ e.preventDefault(); }, {passive: false});
总结：
在使用以上方法去除错误后，
需要自定义所有 点击，滑动，缩放等等事件！！！
否则你就会出现滑动失效这一类的错误了！
touch-action: auto;
移动端一个与手势触摸密切相关的 CSS 属性,
源自windows phone手机, 后被广大浏览器引入
移动端可以畅行的CSS属性
可选值:
- touch-action: auto;
默认值，表示手势操作什么的完全有浏览器自己决定
- touch-action: manipulation;
浏览器只允许进行滚动和持续缩放操作，类似双击缩放这种非标准操作就不可以。
想当初，click事件在移动端有个300ms延时，就是因为避免和手机双击行为发生冲突
设置后就干掉了双击行为，避免浏览器click事件300ms延时问题
有了 touch-action:manipulation，我们可以在网页中放心大胆使用click事件了
auto 和 manipulation 是 Safari 唯一支持的两个 touch-action 属性值
其他关键字，正如字面意思，要么只能左移，要么只能左右移动，要么只能右移之类
- touch-action: none;
不进行任何touch相关默认行为
例如，你想用手指滚动网页就不行，双击放大缩小页面也不可以，所有这些行为要自定义
任意组合如： touch-action: pan-left pan-up pan-zoom; 表示可以左移，上移和缩放。
- touch-action: pinch-zoom;
手指头可以用来缩放页面
- touch-action: pan-x;
手指头可以水平移来移去
- touch-action: pan-left;
手指头可以往左移动，移动开始后还是可以往右恢复的
- touch-action: pan-right;
手指头可以可以往右移动，移动开始后还是可以往左恢复的
- touch-action: pan-y;
手指头可以垂直移来移去
- touch-action: pan-up;
手指头可以往上移，移动开始后还是可以往下恢复的
- touch-action: pan-down;
手指头可以往下移，移动开始后还是可以往上恢复的
