web 移动端事件总结

参考文章：
在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意
移动端兼容问题研究 javascript事件机制详解（涉及移动兼容）
读fastclick源码有感 彻底解决tap“点透”，提升移动端点击响应速度

实现一个移动端TODO应用，想添加一些触摸事件，之前无论PC还是移动端，都统一用click，现在细思恐极啊~~。一时半会想不出更好的实现方案，于是找了很多资料学习了一下，在此做个分享。

为什么移动端不用click

估计大家都知道，移动端的click有300ms延迟的问题，在移动端浏览器中，连续两次点击是缩放操作，所以在用户点击屏幕后，浏览器会检查在300ms内是否有另一次点击，如果没有则触发click事件。因为有延迟，所以不使用咯。

替换click的方案

1. 使用touchstart
   touch事件包括touchstart、touchend、touchmove等，简单使用touchstart来替换click，但问题是，如果我想在同一对象上绑定一个单击事件和一个滑动事件怎么办，这时候就会出现冲突。
2. 使用tap事件
   标准事件中没有tap事件，tap事件是一些库，如zepto，使用touch进行封装的，在touchstart、touchend时记录时间、手指位置，在touchend时进行比较，如果手指位置为同一位置且时间间隔较短，且过程中未曾触发touchmove事件，则调用回调函数。
   zepto用于判断的关键代码：

//延迟时间
 if (delta > 0 && delta <= 250) touch.isDoubleTap = true;
//允许的偏移量
if (deltaX < 30 && deltaY < 30) {……}

不过300ms后还是会产生click事件，只是在该对象上没有进行监听，由此产生了“点透”现象：
（1）页面弹出一个模态框，模态框上有个按钮（关闭模态框），按钮正下方（在主页面上）有一个输入框
（2）当点击模态框上的关闭按钮，模态框立即消失，但300ms后click事件触发，而输入框正好监听click事件，因此输入框会得到焦点
为什么不对click进行拦截呢？原因是zepto使用的是事件代理，元素上的touch事件冒泡到document上，在document的事件回调中执行绑定在元素上的事件回调，而在document上执行preventDefault是不起作用的。
解决“点透”问题：略。

3. 使用fastclick
   使用方法参考：https://github.com/ftlabs/fastclick
   fastclick也是使用事件委托（FastClick.attach(document.body, options);），但是冒泡到body上后，通过tap原理来判断是否单击，是则重新构造一个点击事件dispatch到原来的元素上，触发元素上的绑定事件，由于在tap事件后触发click，所以解决了延迟问题，并且300ms后，不再产生click事件，所以解决了”点透“问题。

FastClick.prototype.sendClick = function(targetElement, event) {
    ……   
    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.dispatchEvent(clickEvent);
};

另外的好处是

FastClick doesn't attach any listeners on desktop browsers.
Chrome 32+ on Android withwidth=device-width in the viewport meta tag doesn't have a 300ms delay

到了这里，我们知道，最好的解决兼容PC和移动端的点击事件的办法是引入fastclick。然而我现在想要实现的是各种触摸事件——gg——既然要实现各种触摸事件，那就暂时不考虑PC的问题，所以考虑使用hammer.js

hammer.js

使用hammer.js实现qq消息中拖出删除画面的效果

qq消息界面截图

最开始的实现方法是通过panstart、panmove、panend来实现滑动条的滑动距离和手指的滑动成相等关系，实现方法可以看我的codepan：
See the Pen touch delete by jsAllen (@jsAllen) on CodePen

不过这样的动画实现过程比较恶心，有好多的判断，后来在vue项目中，直接改用过渡，通过panleft、panright来修改translateX，再给tranlateX添加过渡。虽然效果明显弱了点，但操作流畅了许多。

在vue中使用hammer.js

在github上找了一下，发现有个vue-touch，更惊喜的是，这是个官方插件，不过项目使用的是vue2.0版本，而vue-touch暂不兼容vue2.0。看了一下issue，发现有人也遇到这个问题，然后又发现vue-touch有一个分支，已经做了兼容，哈哈。看了下源码，其实就是将hammer.js封装成指令。
使用方法：

就此解决了项目中的一个小小触摸事件，不过感觉后面的坑会很多，自己接触移动端事件比较少，所以后面还要不断的总结经验，寻找更加高效优雅的处理方法。