ktouch移动端事件库

最近闲来无事，写了个移动端的事件库，代码贴在下面，大家勿拍。

  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.target
107             });
108         }, false);
109     }
110     var eventMap = {
111         tap: _tap,
112         swipe: _swipe,
113         longtap: _longtap,
114         drag: _drag
115     }
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

posted @ 2014-07-21 16:58  卡布其诺猫  阅读(434)  评论(2)  编辑  收藏  举报