vue项目移动端 200-300毫秒延时解决 方案

  1. fastclick插件
https://github.com/ftlabs/fastclick

终端执行命令:

npm install fastclick --save

打开main.js文件(拷贝以下代码)

// 引入fastclick
import fastClick from 'fastclick'

//使用faseclick

fastClick.attach(document.body)

  1. 使用移动端事件

touchstart: 当在屏幕上按下手指时触发

touchmove: 当在屏幕上移动手指时触发

touchend: 当在屏幕上抬起手指时触发

touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,
即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。
// 用法同普通的click事件

touch事件与click事件同时触发

在很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作)。

因为双击缩放检测的存在,在移动设备屏幕上点击操作的事件执行顺序:

touchstart(瞬间触发) → touchend → click(200-300ms延迟)

如果你使用了触摸事件,可以调用 event.preventDefault()来阻止鼠标事件被触发。

当然还有第三方处理这个问题的库
zaport.js
swipe
hammer.js
百度云的touch.js

你可能感兴趣的:(移动端点击事件300毫秒延迟)