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;

手指头可以往下移，移动开始后还是可以往上恢复的