标签: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.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
标签:style blog http color io art
原文地址:http://www.cnblogs.com/kbqncf/p/3858784.html