关于vue解决移动端300ms延迟之fastclick

问题描述:

移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。

产生的原因

移动端的双击会缩放导致click判断延迟,这是为了检查用户是否在做双击。

解决方案

1.禁用缩放

<meta name = "viewport" content="user-scalable=no" > 

缺点是网页无法缩放

2.css新属性

配置css属性touch-action: aotu
缺点:可能存在浏览器兼容问题

3.fastclick

原理: 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉
vue的 使用方法:
1.安装fastclick

npm install fastclick --save

2.在mian.js中导入并挂载到dom上

import Vue from 'vue'
import App from './App.vue'
import router from './router'
//导入
import FastClick from 'fastclick'
//解决移动端300ms延迟
FastClick.attach(document.body)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值