touch.js

众所周知，mobile与pc 前端开发的不同中，有一点就是事件的不同，mobile上有touchstart,touchmove,touchend等，而pc上用最多的应该还是我们的click事件。mobile上，自己又喜欢用zepto.js库（喜欢有时候就是一种先入为主的感觉），但是zepto-touch又不争气，有这那的问题（比如穿透什么的）。只好抛弃它，fastclick很好用，只是只有对click事件的加速，所以把tap.js的代码拿来自己改了改，增加了swipeleft和swiperight事件产生了touch.js。这样，我平时用的最多的tap,swipeleft,swiperight事件都齐活了。地址：https://github.com/lilyImage/touch/

原理

与所有的这类封装的touch事件一样，利用touchstart, touchmove, touchend，touchcancel,的组合，在touchstart的时候记录手指的x,y位置；在touchmove的时候同样记录手指的位置，然后利用差值来判断是tap吗？还是swipe？zepto-touch模块设置的是30的差值，也就是手指移动的位置与开始时候的手指位置的差值。在touch.js中设置的这个阈值是10。

(1)如果移动的距离绝对值没有超过10，认为是tap

(2)如果移动的距离在x方向上小于10，认为是swipeleft

(3)如果移动的距离在y方向上大于10，认为是swiperight

注： 没有判断y轴方向，可以加上y的判断，增加swipeup和swipedown事件

代码

大概100行的代码，简单易懂，具体源代码见github，重点说下核心部分，即自定义事件部分。

/**polyfill https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent*/(function () {    function CustomEvent ( event, params ) {        params = params || { bubbles: false, cancelable: false, detail: undefined };        var evt = document.createEvent( ‘CustomEvent‘ );        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );        return evt;    };    CustomEvent.prototype = window.Event.prototype;    window.CustomEvent = CustomEvent;})();//touchName: 自定义的事件名//bubbles :  是否支持冒泡//cancelable : 是否支持事件被取消var evt = new window.CustomEvent(touchName, {       bubbles: true,       cancelable: true });

polyfill的存在是因为CustomEvent的dom4的规范，不一定所有的浏览器都支持，对于自定义事件的老式写法

// Create the event.创建事件var event = document.createEvent(‘Event‘);// Define that the event name is ‘build‘. 定义事件名为buildevent.initEvent(‘build‘, true, true);// Listen for the event.监听事件document.addEventListener(‘build‘, function (e) {  // e.target matches document from above}, false);// target can be any Element or other EventTarget. 分发事件，对象可以是元素，也可以是其他的事件document.dispatchEvent(event);

所以touch.js的事件处理过程如下：

（1）new 一个touch对象，把需要绑定自定义事件的el传进去

（2）el元素现在绑定了touchstart,touchmove, touchend等事件

（3）在touchstart的时候，记录手指的位置

（4）在touchmove的时候，计算手指的位置，并给出是tap还是swipe的标识

（5）在touchend的时候，创建相应的tap,swipeleft,swiperight自定义事件，并执行

兼容性

还没有具体的测试过在mobile上的兼容性，这还要看各平台浏览器对CustomEvent的实现，以及createEvent的支持情况，后续补充

mobile touch event