移动端H5-在Vue项目中使用fastclick,解决300ms左右的延迟

此生再无相见时 提交于 2019-12-20 17:28:03

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

一、安装
npm install fastclick -S

二、用法
安装完以后,可以在在main.js中全局引入,并绑定到body,全局生效。或者在单页面引入,只针对当前页面生效

//引入
import FastClick from 'fastclick'
//初始化FastClick实例。在页面的DOM文档加载完成后
FastClick.attach(document.body)

三.使用过程中存在的bug:
当使用FastClick 时,input框在ios上点击输入调取手机自带输入键盘不灵敏,有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法:

// 添加Fastclick移除移动端点击延迟
import FastClick from 'fastclick'

//FastClick的ios点击穿透解决方案
FastClick.prototype.focus = function (targetElement) {
    let length;
    if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
        length = targetElement.value.length;
        targetElement.focus();
        targetElement.setSelectionRange(length, length);
    } else {
        targetElement.focus();
    }
};
 
FastClick.attach(document.body)
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!