首页 > 代码库 > ktouch移动端事件库
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.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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。