移动端之点透

旧城等待， 2022-01-12 15:07 284阅读 0赞

## 什么是点透？ ##

在移动端，当用户通过绑定touchstart事件监听函数让浮层关闭时，关闭后浮层后面对应位置页面其他元素也会触发click事件，比如浮层的关闭按钮下是一个链接，当用户点击浮层关闭按钮浮层消失后大约300ms页面同时发生跳转。

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>tap击穿</title>
    
      <style> body { margin: 0; padding: 30px; font-size: 60px; } .mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); color: #fff; padding: 30px; } .close { background: red; padding: 10px; } </style>
    </head>
    <body>
      
      <span class="bg">百度</span>
      <p class="log">0</p>
      <div class="mask">
        <span class="close">X</span>
      </div>
    
      <script> const $ = s => document.querySelector(s) const log = str => $('.log').innerText = str let i = 1 $('.close').ontouchstart = (e) => { $('.mask').style.display = 'none' log('touched ' + (++i)) } $('.bg').onclick = () => { log('点击了背景') } </script>
    
    </body>
    </html>

以上代码，当我们点击关闭按钮时，会打印出"点击了背景"，如果去掉a的注释，会直接跳到百度页面。这就是点透。

## 原因 ##

点透产生的原因就跟300ms延时（[https://blog.csdn.net/fengfangyuan/article/details/92751878，300ms延时，查看这篇文章）有关。当我们点击关闭按钮，touchstart立即触发，弹窗关闭，手指离开屏幕][https_blog.csdn.net_fengfangyuan_article_details_92751878_300ms_touchstart], 触发 touchend，等待300ms左右后，浏览器在用户手指离开处触发click事件，而此时弹窗以及消失， click事件自然弹窗底部的a标签。过程如下：

1.  手指触摸屏幕到屏幕，触发 touchstart
2.  手指在屏幕短暂停留(如果是移动，触发 touchmove)
3.  手指离开屏幕, 触发 touchend
4.  等待约300ms，看用户在此时间内是否再次触摸屏幕。如果没有
5.  300ms后 在用户手指离开的位置触发 click事件

## 解决方式 ##

1.  设置`<meta name="viewport" content="device-width">` 。表面上看起来解决了300ms延时，就能解决穿透。实际上这种方法不可行。因为click事件是在touchend事件之后，更晚于touchstart（间隔了60~100ms），如果在touchstart 里绑定关闭了浮层，约100ms后 click事件触发的时候仍然会引发问题。
2.  关闭浮层用click，不用touchstart， 可行。因为浮层关闭监听的是click，当浮层消失后不会再在原来的位置再冒出个click。
3.  浮层关闭的时间延长。可行。当用户触发touchstart关闭浮层时，浮层可以使用渐变消失（可设置浮层关闭动画在300ms以上），此刻click事件在原来的位置触发时点击的还是浮层，而不是浮层后面的链接
4.  在ontouchstart 里阻止默认事件。可行。 这样可以阻止click的触发

[https_blog.csdn.net_fengfangyuan_article_details_92751878_300ms_touchstart]: https://blog.csdn.net/fengfangyuan/article/details/92751878%EF%BC%8C300ms%E5%BB%B6%E6%97%B6%EF%BC%8C%E6%9F%A5%E7%9C%8B%E8%BF%99%E7%AF%87%E6%96%87%E7%AB%A0%EF%BC%89%E6%9C%89%E5%85%B3%E3%80%82%E5%BD%93%E6%88%91%E4%BB%AC%E7%82%B9%E5%87%BB%E5%85%B3%E9%97%AD%E6%8C%89%E9%92%AE%EF%BC%8Ctouchstart%E7%AB%8B%E5%8D%B3%E8%A7%A6%E5%8F%91%EF%BC%8C%E5%BC%B9%E7%AA%97%E5%85%B3%E9%97%AD%EF%BC%8C%E6%89%8B%E6%8C%87%E7%A6%BB%E5%BC%80%E5%B1%8F%E5%B9%95