关于Cordova页面点击效果的优化

当Cordova 的CDVViewController正常加载网页后，我们可能会面临更多来自页面点击事件以及加载的问题。以下所述是我们项目中所遇到的点击问题及对应的解决方案。
在项目中我们没有用到Cordova所现有的plug-in，而是根据需求开发了自己的插件。此插件可以完成一般的推出视图等功能。

注：我并不直接阐述最终解决方案，而是阐述整个优化历程。如果要直接看最终方案，请直接参阅第三点。

点击问题的产生：
刚开始，我们选择了使用onclick的方式来响应页面上的点击事件，但是效果与原生相差甚远，延时太大（300ms）。据了解是这段延时是为了判断用户是否会触发双击，真是醉了。此时我们考虑到的方法是使用ontouch替代onclick，touch事件确实能够做到看似与原生一样的点击反应，但如果单纯将页面中的元素添加了touch事件，你将会发现整个页面似乎不能滚动了，因为手指一触碰就触发touchstart方法，不会触发touchmove方法。OK，填坑开始了。

1、我们首先采用了一个比较污的招式。touchstart方法一触发就会执行function，没有touchmove触发的机会。我们就延时touchstart，不管你是要点击还是要滚动，touchstart方法始终是延时100ms后触发（比300ms体验好多了）。如果在这100ms里你触发了touchmove方法，那么，我们将终止touchstart的方法。这样touchmove就得以生存了。以下js代码由于也是现学现用，所以肯定不怎么优雅。

businessListB[i].num = i;
businessListB[i].addEventListener("touchstart", function ()
 {
            tag = businessListB[this.num].id;
            if (tag == null )
            {
                 return;
            }
            this.touchEventTimer = setTimeout(function()
            {
                 cordova.exec(function success() {},
                                       function failure() { },
                                       "CDVPlugin", "onCellClicked", [tag]);
             },100);    // 延时100ms
}, false);
businessListB[i].addEventListener("touchmove", function()
{
             clearTimeout(this.touchEventTimer); // 取消延时
             this.touchEventTimer = false; // 终止touchstart方法
}, false);

刚使用上这套方案时发现，哇塞，完美！可是把玩时间一长，就发现了新的问题：有时图片的点击效果出来了，但是没有执行点击后的下一步动作。
这是因为几乎没有人，在用手指点击屏幕时，每次都保持垂直点击！
意思是，有些人明明是想点击，不是滚动。但是在点击下去的瞬间，在touchstart方法的100ms中，手指略微的往前移动了一点。这种感觉自己不会感受到，但是系统能捕捉到。说白了就是手指按下去时会有一点点缓冲。是的，你move了，那么你touchstart方法将不会执行！想明白这点之后我可以90%以上概率重现这个bug！
有些人可能会说，是不是100ms太长了，减少点时间试试。可是这时间是受约束的，也就是说你还要保证你的滚动事件正常触发。几次时间调整实验表明，这两个bug，不可能同时消失。这不可能是一个完美的方案！

2、这次我换了个方法，着重避免点击时的缓冲！还加上了touchend事件。
在touchstart方法中捕获点击时的坐标，在touchmove中不断的捕获最终坐标，判断移动距离，小于一定数字我们就判为不是移动，最后在touchend方法中执行函数。
这个“一定数字”让我觉得，这也不会是一个完美方案。实验结果确实如此，每个人的操作习惯不一样，而我却在视图给用户制定一个操作规则，现在想想，着实不可取。

3、最终被我找到了一个完美解决的方案，Fastclick.js！！
这个文件神奇之处在于，他不需要你用touch，你就用你的 onclick好了，他能够让你的onclick有touch一样的反应速度！方法也非常简单，在html页面中引入该文件，并添加一句： FastClick.attach(document.body);
完工！
目前，这种方案没有遇到什么bug，经得住我的各种恶劣测试。关于FastClick的原理，还未细究。网上简单看了下，是因为他会捕捉页面中的所有点击事件，并且将其替换为自己的方法。待有机会我再好好研究下。
FastClick链接：https://github.com/ftlabs/fastclick

其实很多优化方案，Cordova官网上已经告诉我们了，只恨我当时没耐心看完。详情请戳：
http://cordova.apache.org/docs/en/latest/guide/next/index.html#2-performance-considerations

更直观的优化建议：
http://coenraets.org/keypoint/phonegap-performance/#0
（进入网站后往左滑）

期待大家更好的建议，多多交流！