问题描述:
移动端浏览器在派发点击事件的时候,通常会出现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)