移动端触摸、点击事件优化（fastclick源码学习）
最近在做一些微信移动端的页面，在此记录关于移动端触摸和点击事件的学习优化过程，主要内容围绕fastclick展开。
fastclick github
问题起源
移动端浏览器一般在用户点击屏幕之后会延迟大约300ms才触发click event
手机打开此链接查看延迟demo
（现在许多浏览器已经不存在延迟问题了，详见fastclick github，但笔者的手机浏览器还是出现了三百毫秒延迟的问题）
截图如下
为什么会300ms延迟呢，主要是有一个双击缩放功能，浏览器需要判断用户点击是否为双击缩放。这个问题不解决，
1、用户体验就会很差，很不流畅，尤其是在密集操作场景下，比如计算器,不解决300ms延迟问题，感觉反应很慢；
2、点击穿透问题
事件触发顺序
在了解fastclick的思路之前，我们先看一下事件触发顺序是怎样的
- touchstart
- touchmove
- touchend
- mouseover ：当指针设备移动到存在监听器的元素或其子元素的时候，mouseover事件就会被触发。
- mouseenter：当指针设备( 通常指鼠标 )在元素上移动时, mousemove 事件被触发。
- mousedown
- click
移动端click有300ms延迟问题，touch可没有哦。
fastclick思路
fastclick的思路就是利用touch来模拟tap（触碰），如果认为是一次有效的tap，则在touchend时立即模拟一个click事件，分发到事件源（相当于主动触发一次click），同时阻止掉浏览器300ms后产生的click。
源码学习
先看使用示例，很简单，我们的思路就一直跟着attach走。
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
直接给body绑定fastlick就行了- -。
看源代码结构（注：以下所有代码均去掉了一些不影响理解思路的部分，大部分思路写在注释中）
//构造函数
function FastClick(layer, options)
//判断是否需要浏览器原生的click事件（针对一些特殊元素比如表单）
FastClick.prototype.needsClick = function(target)
//发送模拟的click event
FastClick.prototype.sendClick = function(targetElement, event)
// touchstart eventhandler
FastClick.prototype.onTouchStart = function(event)
// touchmove eventhandler
FastClick.prototype.onTouchMove = function(event)
// touchend eventhandler
FastClick.prototype.onTouchEnd = function(event)
// 判断这次tap是否有效
FastClick.prototype.onMouse = function(event)
//click handler 捕获阶段监听
FastClick.prototype.onClick = function(event)
//销毁fastlick，移除事件绑定
FastClick.prototype.destroy = function()
//绑定接口
FastClick.attach = function(layer, options) {
return new FastClick(layer, options);
};
attach实际就执行了构造函数进行初始化，接下来我们来看构造函数发生了什么
function FastClick(layer,options){
//一些属性初始化
//安卓一些老版本浏览器不支持bind， poly fill
function bind (method, context) {
return function () {
return method.apply(context, arguments);
};
}
var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove',
'onTouchEnd', 'onTouchCancel'];
var context = this;
//将所有handler的this绑定到fastclick实例
for (var i = 0, l = methods.length; i < l; i++) {
context[methods[i]] = bind(context[methods[i]], context);
}
//为当前fast click对象绑定的layer（我们的示例中时document.body）加监听
layer.addEventListener('click', this.onClick, true);//true 捕获阶段触发
layer.addEventListener('touchstart', this.onTouchStart, false);
layer.addEventListener('touchmove', this.onTouchMove, false);
layer.addEventListener('touchend', this.onTouchEnd, false);
layer.addEventListener('touchcancel', this.onTouchCancel, false);
}
构造函数主要是初始化一些属性，polyfill，和添加监听，
下面开始看一下重头戏，touchstart，touchend是如何判断tap是否有效、如何模拟click事件、如何阻止300ms后的click
touchstart
FastClick.prototype.onTouchStart = function (event) {
var targetElement, touch, selection;
// Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111).
// 如果多触点可能是在缩放，不对targetElement初始化，在此提前终止避免误模拟产生click
if (event.targetTouches.length > 1) {
return true;
}
//获取发生事件源元素（目标阶段的元素）
targetElement = this.getTargetElementFromEventTarget(event.target);
touch = event.targetTouches[0];
this.trackingClick = true;//标记开始跟踪click
this.trackingClickStart = event.timeStamp;//开始跟踪时间
this.targetElement = targetElement;//事件源元素
//触摸坐标，接下来判断是否越界用到
this.touchStartX = touch.pageX;
this.touchStartY = touch.pageY;
// Prevent phantom clicks on fast double-tap (issue #36)
if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
event.preventDefault();//阻止之后的click
}
return true;
};
touchstart主要是初始化跟踪的tap相关的一些属性，用于之后的判断‘
接下来touchmove
FastClick.prototype.onTouchMove = function (event) {
if (!this.trackingClick) {
return true;
}
// If the touch has moved, cancel the click tracking 移动到了其他元素
if (this.targetElement !== this.getTargetElementFromEventTarget(event.target) || this.touchHasMoved(event)) {//移动越界了，取消本次click模拟处理，走原生流程
this.trackingClick = false;
this.targetElement = null;
}
return true;
};
touchmove比较简单，主要是兼容滑动tap（swiper）等等，滑动越界则不模拟click
下面是touchend
FastClick.prototype.onTouchEnd = function (event) {
var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
if (!this.trackingClick) {
return true;
}
// Prevent phantom clicks on fast double-tap (issue #36)
//阻止快速双击
if ((event.timeStamp - this.lastClickTime) < this.tapDelay) {
this.cancelNextClick = true;
return true;
}
//超时就不算click了，走原生流程，不阻止click
if ((event.timeStamp - this.trackingClickStart) > this.tapTimeout) {
return true;
}
this.lastClickTime = event.timeStamp;
this.trackingClick = false;
this.trackingClickStart = 0;
// Prevent the actual click from going though - unless the target node is marked as requiring
// real clicks or if it is in the whitelist in which case only non-programmatic clicks are permitted.
if (!this.needsClick(targetElement)) {
event.preventDefault();//阻止之后的click
this.sendClick(targetElement, event);//发送模拟click
}
return false;
};
//发送模拟的click event
FastClick.prototype.sendClick = function (targetElement, event) {
var clickEvent, touch;
// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
if (document.activeElement && document.activeElement !== targetElement) {
document.activeElement.blur();
}
touch = event.changedTouches[0];
//模拟click
// Synthesise a click event, with an extra attribute so it can be tracked
clickEvent = document.createEvent('MouseEvents');
clickEvent.initMouseEvent(this.determineEventType(targetElement), true, true, window, 1, touch.screenX, touch.screenY, touch.clientX, touch.clientY, false, false, false, false, 0, null);
clickEvent.forwardedTouchEvent = true;
//向targetElement分发模拟的click
targetElement.dispatchEvent(clickEvent);
};
最后，还会在layer的click捕获阶段监听
//click handler 捕获阶段监听
FastClick.prototype.onClick = function (event) {
var permitted;
// It's possible for another FastClick-like library delivered with third-party code to fire a click event before FastClick does (issue #44). In that case, set the click-tracking flag back to false and return early. This will cause onTouchEnd to return early.
if (this.trackingClick) {//1、出界会置为false，2成功模拟了一次完成tap并阻止click也会置为false，3、避免三方库影响
this.targetElement = null;
this.trackingClick = false;
return true;
}
// Very odd behaviour on iOS (issue #18): if a submit element is present inside a form and the user hits enter in the iOS simulator or clicks the Go button on the pop-up OS keyboard the a kind of 'fake' click event will be triggered with the submit-type input element as the target.
if (event.target.type === 'submit' && event.detail === 0) {
return true;
}
permitted = this.onMouse(event);
// Only unset targetElement if the click is not permitted. This will ensure that the check for !targetElement in onMouse fails and the browser's click doesn't go through.
if (!permitted) {
this.targetElement = null;
}
// If clicks are permitted, return true for the action to go through.
return permitted;
};
// 判断这次鼠标是否有效
FastClick.prototype.onMouse = function (event) {
// If a target element was never set (because a touch event was never fired) allow the event
if (!this.targetElement) {
return true;
}
// 标记fastclick模拟产生的event
if (event.forwardedTouchEvent) {
return true;
}
// Programmatically generated events targeting a specific element should be permitted
if (!event.cancelable) {
return true;
}
// Derive and check the target element to see whether the mouse event needs to be permitted;
// unless explicitly enabled, prevent non-touch click events from triggering actions,
// to prevent ghost/doubleclicks.
// 是否需要原生的click
if (!this.needsClick(this.targetElement) || this.cancelNextClick) {
// Prevent any user-added listeners declared on FastClick element from being fired.
if (event.stopImmediatePropagation) {
event.stopImmediatePropagation();
} else {
// Part of the hack for browsers that don't support Event#stopImmediatePropagation (e.g. Android 2)
event.propagationStopped = true;
}
// Cancel the event 阻止事件捕获和冒泡
event.stopPropagation();
event.preventDefault();
return false;
}
// If the mouse event is permitted, return true for the action to go through.
return true;
};
这里主要是判断这次click是否有效（如无效，则阻止捕获和冒泡）
至此基本流程已经结束。
其中有1个注意的点，笔者在chrome(Version 64.0.3282.119 (Official Build) (64-bit))已测试
stopPropagation，stopImmediatePropagation不仅会阻止冒泡还会阻止捕获过程哦。
最后
推荐阅读源码，源码中有许多关于focus、不同浏览器兼容和特殊表单元素的处理fastclick github。
这里是笔者带有中文注释的代码中文注释代码。
如有纰漏，欢迎批评指正。