在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
<!--举例 -->
<buttton class="needsclick" @click="aaa"></button>