写在前面
在做移动端项目的时候，会有touchstart、touchmove、touchend、touchcancel等事件，而点击事件click浏览器需等待 300 毫秒，以判断用户是否再次点击了屏幕。这样就照成了很多问题，比如点击穿透等。
click 事件延迟300ms原因
2007年苹果为了解决iPhone Safari访问PC页面的缩放问题，提供了一个双击缩放功能。当用户第一次触摸屏幕的时候浏览器等待300ms才能判断用户是要点击(click)还是缩放(zoom)，这就造成用户触摸屏幕到click事件触发存在300ms延迟。
触摸屏幕事件流程如下:
touchstart
touchmove
touchend
Wait 300ms in case of another tap
click
受到这个延迟影响的场景有:
JavaScript监听的click事件
基于click的交互的元素, 例如链接, 表单元素
vue项目使用fastclick
FastClick 是 FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。
安装npm install fastclick --save
引入
import fastclick from 'fastclick';
fastclick.attach(document.body);
网友评论