vue 移动端点击延迟_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