vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
一.使用npm安装:npm install fastclick -S二.用法:安装完以后,可以在在main.js中全局引入,并绑定到body,全局生效。或者在单页面引入,只针对当前页面生效//引入import FastClick from 'fastclick'//初始化FastClick实例。在页面的DOM文档加载完成后FastClick.attach(document...
·
一.使用npm安装:
npm install fastclick -S
二.用法:
安装完以后,可以在在main.js中全局引入,并绑定到body,全局生效。或者在单页面引入,只针对当前页面生效
//引入
import FastClick from 'fastclick'
//初始化FastClick实例。在页面的DOM文档加载完成后
FastClick.attach(document.body)
三.使用过程中存在的bug:
当使用FastClick 时,input框在ios上点击输入调取手机自带输入键盘不灵敏,有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法:
FastClick.prototype.onTouchEnd = function(event) {
if(event.target.hasAttribute("type") && event.target.getAttribute("type") == "text") {
event.preventDefault();
return false;
}
}
此方法暂有问题,感谢YY110621 博主发现,修正如下:
// 添加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)
更多推荐
已为社区贡献7条内容
所有评论(0)