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

vue 移动端点击延迟_vue移动端项目-click事件在浏览器中延迟300ms的解决方法相关推荐

vue移动端点击电话图标跳转拨打电话功能
vue移动端点击电话图标跳转拨打电话功能项目场景: 最近做app的时候,遇到点击电话小图标跳转到拨打电话功能 ![如图所示](https://img-blog.csdnimg.cn/20210519 ...
移动端的click事件延迟触发的原理是什么？如何解决这个问题？
移动端的click事件延迟触发的原理是什么?如何解决这个问题? 原理 :移动端屏幕双击会缩放页面 300ms延迟会出现点透现象在列表页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹 ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
vue 项目初始化时，npm run dev报错解决方法
vue 项目初始化时,npm run dev报错解决方法参考文章: (1)vue 项目初始化时,npm run dev报错解决方法 (2)https://www.cnblogs.com/ruilin ...
vue启动项目报错：npm ERR! missing script: serve解决方法
vue启动项目报错:npm ERR! missing script: serve解决方法 1.vue启动项目报错:npm ERR! missing script: serve 问题原因: 在配置文件中 ...
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法参考文章: (1)vue项目初始化时npm run dev报错webpack-dev-server解决方法 ( ...
vue项目中将视频链接分享至推特的解决方法及踩坑记录
vue项目中将视频链接分享至推特的解决方法及踩坑记录将动态改变的视频链接分享至推特,并希望能直接在推特上播放视频的需求实现方法及踩坑记录如果只要将文本或链接分享到推特,不需要推特识别图片/视频等媒 ...
vue移动端点击事件延迟_解决Vue 界面在苹果手机上滑动点击事件等卡顿问题_莺语_前端开发者...
用 (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局页面内容在对应的组件的最外层div上加上这样的样式: .conten ...

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

vue 移动端点击延迟_vue移动端项目-click事件在浏览器中延迟300ms的解决方法相关推荐

最新文章

热门文章