最近闲来无事,写了个移动端的事件库,代码贴在下面,大家勿拍。
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