移动H5开发中经常用到滑动效果（页面上移、下移、向左滑动、向右滑动等），浏览器并没有内置swipe事件，可以通过touch事件（touchstart、touchmove和touchend）模拟swipe效果。jQuery mobile和zeptojs提供了swipe事件。jquery mobile只有swipeLeft和swipeRight，zeptojs提供了完整的tap和swipe事件。
1 /**
2 * @author [email protected]
3 * http://git.oschina.net/accountwcx/rhui
4 *
5 * swipe事件，包括swipeLeft、swipeRight、swipeUp、swipeDown。
6 * 调用方法
7 * Rhui.mobile.swipeLeft(el, callback, options)
8 * Rhui.mobile.swipeRight(el, callback, options)
9 * Rhui.mobile.swipeUp(el, callback, options)
10 * Rhui.mobile.swipeDown(el, callback, options)
11 * 如果使用jQuery，调用方法
12 * $(el).rhuiSwipe(‘swipeLeft‘, callback, options);
13 * $(el).rhuiSwipe(‘swipeRight‘, callback, options);
14 * $(el).rhuiSwipe(‘swipeUp‘, callback, options);
15 * $(el).rhuiSwipe(‘swipeDown‘, callback, options);
16 */
17 (function(window, $){
18 var Rhui = window.Rhui || {};
19 window.Rhui = Rhui;
20 Rhui.mobile = (function(){
21 var touch = {
22 distance: 30, //滑动距离，超过该距离触发swipe事件，单位像素。
23 duration: 1000 //滑动时长，超过该时间不触发swipe，单位毫秒。
24 };
25
26 /**
27 * 绑定事件
28 * @param el 触发事件的元素
29 * @param swipe 事件名称，可选值为swipeLeft,swipeRight,swipeUp,swipeDown
30 * @param callback 事件回调函数
31 * @param isStopPropagation 是否停止冒泡，true为停止冒泡
32 * @param isPreventDefault 是否阻止默认事件，true为阻止默认事件
33 * @param triggerOnMove swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
34 * 一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
35 * 默认是在touchend中触发。
36 */
37 function bindSwipe(el, swipe, callback, triggerOnMove, isStopPropagation, isPreventDefault){
38 var startPoint, endPoint, timer;
39
40 /**
41 * 计算滑动方向
42 * 首先根据x方向和y方向滑动的长度决定触发x方向还是y方向的事件。
43 * 然后再判断具体的滑动方向。
44 * 如果滑动距离不够长，不判断方向。
45 */
46 function swipeDirection(x1, y1, x2, y2){
47 var diffX = x1 - x2,
48 diffY = y1 - y2,
49 absX = Math.abs(diffX),
50 absY = Math.abs(diffY),
51 swipe;
52
53 if(absX >= absY){
54 if(absX >= touch.distance){
55 swipe = diffX > 0 ? ‘swipeLeft‘ : ‘swipeRight‘;
56 }
57 }else{
58 if(absY >= touch.distance){
59 swipe = diffY > 0 ? ‘swipeUp‘ : ‘swipeDown‘;
60 }
61 }
62
63 return swipe;
64 }
65
66 // 清除本次滑动数据
67 function clearSwipe(){
68 startPoint = undefined;
69 endPoint = undefined;
70
71 if(timer !== undefined){
72 clearTimeout(timer);
73 timer = undefined;
74 }
75 }
76
77 /**
78 * 判断是否符合条件，如果符合条件就执行swipe事件
79 * @param el {HTMLElement} 元素
80 * @param event {Event} Touch原始事件
81 * @param return 如果执行了事件，就返回true。
82 */
83 function execSwipe(el, event){
84 if(startPoint && endPoint && swipeDirection(startPoint.x, startPoint.y, endPoint.x, endPoint.y) === swipe){
85 callback.call(el, event);
86 return true;
87 }
88 }
89
90 el.addEventListener(‘touchstart‘, function(event){
91 var self = this, touchPoint = event.touches[0];
92
93 if(isStopPropagation){
94 event.stopPropagation();
95 }
96
97 if(isPreventDefault){
98 event.preventDefault();
99 }
100
101 startPoint = {
102 x: Math.floor(touchPoint.clientX),
103 y: Math.floor(touchPoint.clientY)
104 };
105
106 timer = setTimeout(function(){
107 //如果超时，清空本次touch数据
108 clearSwipe();
109 }, touch.duration);
110 });
111
112 el.addEventListener(‘touchmove‘, function(event){
113 var self = this, touchPoint = event.touches[0];
114
115 if(isStopPropagation){
116 event.stopPropagation();
117 }
118
119 if(isPreventDefault){
120 event.preventDefault();
121 }
122
123 if(startPoint){
124 endPoint = {
125 x: Math.floor(touchPoint.clientX),
126 y: Math.floor(touchPoint.clientY)
127 };
128
129 //执行swipe事件判断，是否符合触发事件
130 if(triggerOnMove){
131 if(execSwipe(self, event)){
132 clearSwipe();
133 }
134 }
135 }
136 });
137
138 el.addEventListener(‘touchend‘, function(event){
139 if(isStopPropagation){
140 event.stopPropagation();
141 }
142
143 if(isPreventDefault){
144 event.preventDefault();
145 }
146
147 execSwipe(self, event);
148 //清除本次touch数据
149 clearSwipe();
150 });
151 }
152
153 /**
154 * @param el {HTMLElement} HTML元素
155 * @param callback {Function} 事件回调函数
156 * @param options {Object} 可选参数
157 * isStopPropagation {Boolean} 是否停止冒泡，true为停止冒泡
158 * isPreventDefault {Boolean} 是否阻止默认事件，true为阻止默认事件
159 * triggerOnMove {Boolean}
160 * swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
161 * 一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
162 * 默认值为false，在touchend中触发。
163 */
164 touch.swipeLeft = function(el, callback, options){
165 if(options){
166 bindSwipe(el, ‘swipeLeft‘, callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
167 }else{
168 bindSwipe(el, ‘swipeLeft‘, callback);
169 }
170
171 };
172
173 touch.swipeRight = function(el, callback, options){
174 if(options){
175 bindSwipe(el, ‘swipeRight‘, callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
176 }else{
177 bindSwipe(el, ‘swipeRight‘, callback);
178 }
179 };
180
181 touch.swipeUp = function(el, callback, options){
182 if(options){
183 bindSwipe(el, ‘swipeUp‘, callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
184 }else{
185 bindSwipe(el, ‘swipeUp‘, callback);
186 }
187 };
188
189 touch.swipeDown = function(el, callback, options){
190 if(options){
191 bindSwipe(el, ‘swipeDown‘, callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
192 }else{
193 bindSwipe(el, ‘swipeDown‘, callback);
194 }
195 };
196
197 return touch;
198 })();
199
200 // 注册jquery方法
201 if($ && $.fn){
202 $.fn.extend({
203 /**
204 * 模拟touch swipe事件，支持链式调用。
205 * @param name {String} swipe事件名称，值有swipLeft、swipeRight、swipeUp、swipeDown。
206 * @param callback {Function} swipe事件回调函数
207 * @param opts {Object} 可选参数
208 * isStopPropagation {Boolean} 是否停止冒泡，true为停止冒泡
209 * isPreventDefault {Boolean} 是否阻止默认事件，true为阻止默认事件
210 * triggerOnMove {Boolean} swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
211 * 一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
212 * 默认值为false，在touchend中触发。
213 */
214 rhuiSwipe: function(name, callback, opts){
215 var fnSwipe = Rhui.mobile[name];
216
217 if(this.length > 0 && fnSwipe){
218 this.each(function(){
219 fnSwipe(this, callback, opts);
220 });
221 }
222
223 return this;
224 }
225 });
226 }
227 })(window, $);
使用实例：
<style type="text/css">
.test{
width: 400px;
height: 400px;
}
</style>
<div id="div1" class="test"></div>
<div class="test"></div>
<script type="text/javascript">
Rhui.mobile.swipeUp(document.getElementById(‘div1‘), function(event){
console.log(event);
}, {
// 可选参数
isStopPropagation: true,
isPreventDefault: true,
triggerOnMove: true
});
$(‘.test‘).rhuiSwipe(‘swipeLeft‘, function(event){
console.log(event);
}, {
// 可选参数
isStopPropagation: true,
isPreventDefault: true,
triggerOnMove: true
});
</script>
实例展示：
<style type="text/css">
.test{
width: 400px;
height: 400px;
}
</style>
<div id="div1" class="test"></div>
<div class="test"></div>
<script type="text/javascript">
Rhui.mobile.swipeUp(document.getElementById(‘div1‘), function(event){
console.log(event);
}, {
// 可选参数
isStopPropagation: true,
isPreventDefault: true,
triggerOnMove: true
});
$(‘.test‘).rhuiSwipe(‘swipeLeft‘, function(event){
console.log(event);
}, {
// 可选参数
isStopPropagation: true,
isPreventDefault: true,
triggerOnMove: true
});
</script>
zeptojs touch事件
zeptojs也提供了滑动事件，该滑动事件需要引用额外的touch.js。
| 事件 | 描述 |
|---|---|
| tap | 类似PC端浏览器的鼠标点击事件，由于移动浏览器点击事件有延迟，tap提供了无延迟的点击效果。 |
| singleTap | 效果和tap一样 |
| doubleTap | 类似PC端浏览器的鼠标双击事件 |
| longTap | 长按事件，在元素上长按超过0.75秒触发。有些浏览器有默认的长按事件，可能会被覆盖。 |
| swipe | 滑动事件，该事件不考虑滑动方向。 |
| swipeLeft | 向左滑动 |
| swipeRight | 向右滑动 |
| swipeUp | 向上滑动 |
| swipeDown | 向下滑动 |
实例展示：
1 <style>.delete { display: none; }</style>
2
3 <ul id=items>
4 <li>List item 1 <span class=delete>DELETE</span></li>
5 <li>List item 2 <span class=delete>DELETE</span></li>
6 </ul>
7
8 <script>
9 // show delete buttons on swipe
10 $(‘#items li‘).swipe(function(){
11 $(‘.delete‘).hide()
12 $(‘.delete‘, this).show()
13 })
14
15 // delete row on tapping delete button
16 $(‘.delete‘).tap(function(){
17 $(this).parent(‘li‘).remove()
18 })
19 </script>
本文摘自死神的丧钟 http://blog.csdn.net/accountwcx/article/details/49334091
时间： 2024-10-10 11:09:57