vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法

一般情况下一些框架就自动解决了这个问题

一.使用npm安装：

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)

vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法相关推荐

fastclick：处理移动端click事件300毫秒延迟
fastclick:处理移动端click事件300毫秒延迟 1.兼容性 iOS 3及更高版本的移动Safari iOS 5及更高版本的Chrome Android上的Chrome(ICS) Opera ...
fastclick 解决移动端click事件300ms延迟
移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应, ...
fastclick 解决移动端click事件延迟300ms和点击穿透问题
一.移动端click点击事件300ms延迟介绍在正常情况下,如果不进行特殊处理,移动端在触发点击事件时,会有300ms的延迟.换句话说,当我们在点击移动端页面后不会立即做出反应,而是会等待300ms ...
vue.js 添加 fastclick的支持
fastclick:处理移动端click事件300毫秒延迟. 安装: 先执行安装fastclick的命令. npm install fastclick -S 之后,在main.js中引入,并绑定到bo ...
苹果浏览器移动端click事件延迟300ms的原因以及解决办法
这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 -- 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...
Vue.js 之组件-监听子组件事件
1.监听子组件事件前面介绍了父组件如何通过 prop 向子组件传递数据,反过来,子组件如何向父组件通信呢? 在 Vue.js 中,这是通过自定义事件来实现的,子组件使用 $emit() 方法触发事件 ...
解决vue下使用fastclick导致ios端需要点击2下才能触发click的问题
在vue里添加了fastclick来处理移动端点击延迟的问题,但是在mac上使用的时候,发现click事件需要点击2下才能触发点击事件. import fastclick from 'fastclic ...
Vue.js not detected 解决办法
问题描述: 在谷歌安装了Vuejs Devtools扩展程序,但是运行自己写的页面,vue图标没有亮起来,控制台也没有Vue选项,悬浮右上角Vue Devtools小图标显示"Vue.js ...
微信开发：解决IOS端下面的点击延迟问题
最近在开发微信端时,发现在Android下面,click事件非常的流畅,而在IOS下却有一定的延迟.查了查资料,发现早在2007年,苹果为了解决在Iphone这种小屏幕浏览器站点的问题,就设置了300 ...

vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法

vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法相关推荐

最新文章

热门文章