vue移动端项目-click事件在浏览器中延迟300ms的解决方法

在H5页面移动端项目当中,click事件在浏览器中会有300ms的延迟,这个也是移动端开发中常见的问题之一,今天就这个问题说一说解决方法

解决click点击事件300ms延迟—fastClick

fastClick的思路就是利用touch来模拟tap(触碰),如果认为是一次有效的tap,则在touchend时立即模拟一个click事件,分发到事件源(相当于主动触发一次click),同时阻止掉浏览器300ms后产生的click,自然也不存在点击穿透的问题。

在vue项目中,可以通过引入fastclick第三方依赖包来解决。
1、安装fastclick依赖

npm install fastclick ---save

2、在main.js中引入并使用

import fastClick from 'fastclick'
 
fastClick.attach(document.body)

遇到的issue

1、在ios系统中,点击input框或者textarea框无法唤起输入法

在使用过程中,你可能会发现,在ios系统中,点击input框或者textarea框无法唤起输入法,往往点击多次才能唤起输入法,极大的影响了用户体验,这是ios升级11.3以后fastclick的问题,对此,可采用以下方法解决:
在fastclick.js中找到FastClick.prototype.focus = function(targetElement) {...},大概在325行左中,添加如下代码即可

在这里插入图片描述

// ios系统下,触摸input框以及textarea框无法唤起输入法
targetElement.focus();

此时fastclick版本是1.0.6

2、有些元素不需要立刻触发点击

例如:在写移动端项目的时候,我引用了vant组件中的swipe轮播图,在项目中全局引入了fastclick后,我发现,swipe滑动失效了。或者你还会碰到一些其他情况,但又不想舍弃掉组件,这时可以参考一下解决方法:
needsclick
对于页面上不需要使用fastclick来立刻触发点击事件的元素,在元素标签的class上添加needsclick




你可能感兴趣的:(vue移动端项目-click事件在浏览器中延迟300ms的解决方法)