mobile_点透_传透

Posted 2021-01-22 tianxiaxuange

点透（传透）

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

PC 事件 在移动端，会有 300 ms 的延迟。

• 点透现象：（面试题）
• 轻轻触碰 box ，box 消失

当点击 非文字覆盖区域 时，盒子正常消失。

当点击 文字区域时，页面发生跳转。

 

• 理想情况：

无论点击哪个区域，只要是点击盒子，盒子都消失，而不影响 a

 

• 解决方案1：（面试阐述）

click    事件监听，PC 端的事件 在 移动端有 300 ms 的延迟

• 解决方案2（模拟器测试无效, 移动端有效）：

① 让 a 元素不能跳转，即取消浏览器的默认行为

• document.addEventListener("touchstart", function(e){
      e.preventDefault();
  }, false);

② box 盒子消失，点击 a 元素，a 应该跳转，即给 a 元素指定一个全新的跳转动作

• var aNodes = document.querySelector("a");
  
  for(var i=0; i<aNodes.length; i++){
      aNodes[i].addEventListener("touchstart", function(){
          // 获取 a 的跳转地址, 交给 window 实现跳转
          window.location.href = this.href;
      }, false);
  };
  /****    模拟器测试无效, 实际测试有效
      window.location 是一个只读对象，所有字母必须小写
      但是仍然可以赋予一个对象 DOMString
      两种写法，效果一致
      window.location = "https://www.baidu.com";
      window.location.href = "https://www.baidu.com";
   ****/