html 遮罩层穿透问题,移动页面点击穿透问题解决方案

近期在做页面的时候，遇到了点击遮罩层时穿透下层的checkbox的问题，由于为了兼顾用户的流畅度，只能使用tap事件，click事件虽然解决了穿透的问题，但总会有300ms的延时，因此最终使用settimeout方法规避了这个问题。下面是我找到的一篇造成这些问题的简单分析，希望对大家有用！

一.click与300ms延迟

移动浏览器提供一个特殊的功能：双击(double tap)放大

300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击(double tap)动作，而不是立即响应单击(click)，等待的这段时间大约是300ms。之前有过简单介绍： 黯羽轻扬：HTML5触摸事件

移动事件提供了 touchstart 、 touchmove 、 touchend 却没有提供tap支持，主流框架(库)都是手动实现了自定义tap事件，以求消除300ms延迟，提高页面响应速度。对于简单的页面，可以把 touchstart 或者 touchend 当作tap来用，但存在一些问题，比如手指接触目标元素，按住不放，慢慢移出响应区域，会触发 touchstart 事件执行对应的事件处理器(本不应该触发)， touchend 事件也存在类似的问题。

此外， 使用原生touch事件也存在点击穿透的问题 ，因为click是在touch系列事件发生后大约300ms才触发的，混用touch和click肯定会导致点透问题，下面详细介绍

二.点击穿透问题

点击穿透现象有3种：

点击穿透问题：点击蒙层(mask)上的关闭按钮࿰