Vue.js - 移动端Click事件300毫秒延迟解决方案(fastClick.js)

0、前言

  • 移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。
  • 原因:移动端的双击会缩放导致click判断延迟。

 

1、兼容性

  • iOS 3及更高版本的移动Safari
  • iOS 5及更高版本的Chrome
  • Android上的Chrome(ICS)
  • Opera Mobile 11.5及以上版本
  • Android 2以来的Android浏览器
  • PlayBook OS 1及以上版本

 

2、不应用FastClick的场景

桌面浏览器

如果视口元标签中设置了width=device-width,Android上的Chrome 32+会禁用300ms延时。

视频元标签如果设置了user-scalable=no,Android上的Chrome(所有版本)都会禁用300ms延迟。 

IE10中,可以使用css属性-ms-touch-action: none禁止元素双击缩放。

 

3、安装

先执行安装fastclick的命令

npm install fastclick -S

Ps:-S == --save

之后,在main.js中引入,并绑定到body

import FastClick from 'fastclick'

FastClick.attach(document.body)

 

转自:https://blog.csdn.net/feifanzhuli/article/details/78247388

你可能感兴趣的:(#,Vue.js,#,WebApp)