最近产品妹子提出了一个体验issue —— 用 iOS 在手Q阅读书友交流区发表书评时，光标点击总是不好定位到正确的位置：
如上图，具体表现是较快点击时，光标总会跳到 textarea 内容的尾部。只有当点击停留时间较久一点（比如超过150ms）才能把光标正常定位到正确的位置。
一开始我以为是 iOS 原生的交互问题没太在意，但后来发现访问某些页面又是没有这种奇怪体验的。
然后怀疑是否 JS 注册了某些事件导致的问题，于是试着把业务模块移除了再跑一遍，发现问题照旧。
于是只好继续做排除法，把页面上的一些库一点点移掉再运行页面，结果发现捣乱的小鬼果然是嫌疑最大的 Fastclick。
然后呢，我试着按API所说，给 textarea 加上一个名为“needsclick”的类名，希望能绕过 fastclick 的处理直接走原生点击事件，结果讶异地发现屁用没有。。。
对此感谢后面我们小组的 kindeng 童鞋帮忙研究了下并提供了解决方案，不过我还想进一步研究到底是什么原因导致了这个坑、Fastclick 对我的页面做了神马~
所以昨晚花了点时间一口气把源码都蹂躏了一遍。
这会是一篇很长的文章，但会是注释非常详尽的剖析文。
文章带分析的源码我也挂在我的 github 仓库上了，有兴趣的童鞋可以去下载来看。
闲话不多说，咱们开始深入 FastClick 源码阵营。
我们知道，注册一个 FastClick 事件非常简单，它是这样的：
|
1 2 3 4 5 |
if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { var fc = FastClick.attach(document.body); //生成实例 }, false); } |
所以我们从这里着手，打开源码看下 FastClick .attach 方法：
|
1 2 3 |
FastClick.attach = function(layer, options) { return new FastClick(layer, options); }; |
这里返回了一个 FastClick 实例，所以咱们拉到前面看看 FastClick 构造函数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
function FastClick(layer, options) { var oldOnClick; options = options || {}; //定义了一些参数... //如果是属于不需要处理的元素类型，则直接返回 if (FastClick.notNeeded(layer)) { return; } //语法糖，兼容一些用不了 Function.prototype.bind 的旧安卓 //所以后面不走 layer.addEventListener('click', this.onClick.bind(this), true); function bind(method, context) { return function() { return method.apply(context, arguments); }; } var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel']; var context = this; for (var i = 0, l = methods.length; i ) { context[methods[i]] = bind(context[methods[i]], context); } //安卓则做额外处理 if (deviceIsAndroid) { layer.addEventListener('mouseover', this.onMouse, true); layer.addEventListener('mousedown', this.onMouse, true); layer.addEventListener('mouseup', this.onMouse, true); } layer.addEventListener('click', this"">
如上图，具体表现是较快点击时，光标总会跳到 textarea 内容的尾部。只有当点击停留时间较久一点（比如超过150ms）才能把光标正常定位到正确的位置。 一开始我以为是 iOS 原生的交互问题没太在意，但后来发现访问某些页面又是没有这种奇怪体验的。 然后怀疑是否 JS 注册了某些事件导致的问题，于是试着把业务模块移除了再跑一遍，发现问题照旧。 于是只好继续做排除法，把页面上的一些库一点点移掉再运行页面，结果发现捣乱的小鬼果然是嫌疑最大的 Fastclick。 然后呢，我试着按API所说，给 textarea 加上一个名为“needsclick”的类名，希望能绕过 fastclick 的处理直接走原生点击事件，结果讶异地发现屁用没有。。。 对此感谢后面我们小组的 kindeng 童鞋帮忙研究了下并提供了解决方案，不过我还想进一步研究到底是什么原因导致了这个坑、Fastclick 对我的页面做了神马~ 所以昨晚花了点时间一口气把源码都蹂躏了一遍。 这会是一篇很长的文章，但会是注释非常详尽的剖析文。 文章带分析的源码我也挂在我的 github 仓库上了，有兴趣的童鞋可以去下载来看。 闲话不多说，咱们开始深入 FastClick 源码阵营。 我们知道，注册一个 FastClick 事件非常简单，它是这样的：
所以我们从这里着手，打开源码看下 FastClick .attach 方法：
这里返回了一个 FastClick 实例，所以咱们拉到前面看看 FastClick 构造函数：
|
