ktouch移動端事件庫

標籤：style   blog   http   color   io   art   

最近閑來無事，寫了個移動端的事件庫，代碼貼在下面，大家勿拍。

  1 /**  2  @version 1.0.0  3  @author gangli  4  @deprecated 移動端觸摸事件庫  5  */  6 (function () {  7     "use strict";  8     var util = {  9         $: function (selector) { 10             return document.querySelector(selector); 11         }, 12         getEventInfo: function (e) { 13             var _e = {}; 14             _e.pageX = e.changedTouches[0].pageX; 15             _e.pageY = e.changedTouches[0].pageY; 16             _e.target = e.target; 17             return _e; 18         } 19     }; 20     var _tap = function (callback) { 21         this.addEventListener(‘touchstart‘, function (e) { 22             var _e = util.getEventInfo(e); 23             _e.type = ‘tap‘; 24             callback.call(this, _e); 25         }, false); 26     }; 27     var _longtap = function (callback) { 28         var interval = 800 , s , e , timer , el; 29         this.addEventListener(‘touchstart‘, function (e) { 30             var _e = util.getEventInfo(e); 31             el = _e.target; 32             s = Date.now(); 33             timer = setTimeout(function () { 34                 _e.type = ‘longtap‘; 35                 callback.call(el, _e); 36             }, interval); 37         }, false); 38         this.addEventListener(‘touchend‘, function (e) { 39             clearTimeout(timer); 40         }, false); 41     }; 42     var _swipe = function (callback) { 43         var s = {}, e = {}, d = {}, distance = 50, 44             angle = 0, 45             type; 46         this.addEventListener(‘touchstart‘, function (evt) { 47             var _e = util.getEventInfo(evt); 48             s.x = _e.pageX; 49             s.y = _e.pageY; 50             evt.preventDefault(); 51         }, false); 52         this.addEventListener(‘touchend‘, function (evt) { 53             var _e = util.getEventInfo(evt); 54             e.x = _e.pageX; 55             e.y = _e.pageY; 56             d.x = e.x - s.x; 57             d.y = e.y - s.y; 58             if (Math.abs(d.x) < distance && Math.abs(d.y) < distance) return false; 59             angle = Math.abs(Math.atan((e.y - s.y) / (e.x - s.x)) / Math.PI * 180); 60             if (angle > 45) { 61                 type = d.y < 0 ? ‘swipe-up‘ : ‘swipe-down‘; 62             } else { 63                 type = d.x < 0 ? ‘swipe-left‘ : ‘swipe-right‘; 64             } 65             callback.call(this, { 66                 type: type, 67                 start: s, 68                 end: e, 69                 distance: d, 70                 target: _e.target 71             }); 72             evt.preventDefault(); 73         }, false); 74     } 75     var _drag = function (callback) { 76         var dragStart = false, s = {}, e = {}, o = {}; 77         this.addEventListener(‘touchstart‘, function (evt) { 78             dragStart = true; 79             var _e = util.getEventInfo(evt); 80             s.x = _e.pageX; 81             s.y = _e.pageY; 82             evt.preventDefault(); 83         }, false); 84         this.addEventListener(‘touchmove‘, function (evt) { 85             if (!dragStart) return; 86             var _e = util.getEventInfo(evt); 87             o.x = _e.pageX - s.x; 88             o.y = _e.pageY - s.y; 89             callback.call(this, { 90                 type: "drag-move", 91                 start: s, 92                 offset: o, 93                 target: _e.target 94             }); 95         }, false); 96         this.addEventListener(‘touchend‘, function (evt) { 97             dragStart = false; 98             var _e = util.getEventInfo(evt); 99             e.x = _e.pageX;100             e.y = _e.pageY;101             callback.call(this, {102                 type: "drag-end",103                 start: s,104                 offset: o,105                 end: e,106                 target: _e.target107             });108         }, false);109     }110     var eventMap = {111         tap: _tap,112         swipe: _swipe,113         longtap: _longtap,114         drag: _drag115     }116     var ktouch = {117         ver: ‘1.0.0‘,118         on: function (el, type, fn) {119             try {120                 var el = util.$(el);121                 eventMap[type].call(el, fn);122                 return this;123             } catch (e) {124                 console.error(‘type error : %s is not allowed‘, type);125             }126         }127     }128     window.ktouch = ktouch;129 })();

github網址：https://github.com/kbqncf/ktouch