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;

手指头能够往下移，移动开始后仍是能够往上恢复的