mingyunyuziyou

Vue项目引用fastclick

作者: 秒速五厘米     
 


一、npm指令

npm install fastclick -S 或者 cnpm install fastclick -S


二、然后在main.js写上

// 引入
import FastClick from 'fastclick'
 
// 使用
FastClick.attach(document.body);
  
package.json 安装之后会有
  
"Dependencies": {
 "fastclick": "^1.0.6",
}


三.使用过程中存在的bug:

当使用FastClick 时,input框在ios上点击输入调取手机自带输入键盘不灵敏,有时候甚至点不出来。

而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法:


 
 FastClick.prototype.onTouchEnd = function(event) {
	if(event.target.hasAttribute("type") && event.target.getAttribute("type") == "text") {
		event.preventDefault();   
		return false;  
	}
}


why use 'fastclick'?  

在移动端H5开发过程中,关于点触可能会遇到如下两个问题:


1、手动点击与真正触发click事件会存在300ms的延迟(ios上面最明显)

2、点击穿透问题(点击行为会穿透元素触发非父子关系元素的事件)