关于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)

猜你喜欢

转载自blog.csdn.net/qq_39748940/article/details/108228109