移动端300ms延迟：假定这么一个场景。用户在浏览器里边点击了一个链接。由于用户可以 进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是 确实要打开这个链接，还是想要进行双击操作。因此，浏览器就等待300毫秒，以判断用户 是否再次点击了屏幕。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应， 而是会等上一小会儿才会出现点击的效果。
点击穿透：假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart 事件上注册了一个回调函数，该回调函数的作用是隐藏B元素。我们发现，当我们点击B元素， B元素被隐藏了，随后，A元素触发了 click事件。这是因为在移动端浏览器，事件执行的顺 序是 touchstart touchend click。而 click 事件有 300ms 的延迟，当 touchstart 事件把 B 元素隐藏之后，隔了 300ms,浏览器触发了 click事件，但是此时B元素不见了，所以该事件 被派发到了A元素身上。如果A元素是一个链接，那此时页面就会意外地跳转。
300ms延迟解决方案:
禁用缩放，在html文档头部加meta标签如下：
FastClick为解决移动端浏览器300毫秒延迟开发的一个轻量级的库
点击穿透解决方案：
1、 只用 touch
2、 只用 click
3、 tap后延迟350ms再隐藏mask
4、 pointer-events
Was this helpful?
0 / 0