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

本文介绍如何使用 FastClick 插件解决移动端点击事件的 300ms 延迟问题,并提供了详细的安装步骤及代码示例。此外,还提到了其他几种常见的移动端事件处理库。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值