首页 > 代码库 > HTML5滑动（swipe）事件
HTML5滑动（swipe）事件
移动H5开发中经常用到滑动效果（页面上移、下移、向左滑动、向右滑动等），浏览器并没有内置swipe事件，可以通过touch事件（touchstart、touchmove和touchend）模拟swipe效果。jQuery mobile和zeptojs提供了swipe事件。jquery mobile只有swipeLeft和swipeRight，zeptojs提供了完整的tap和swipe事件。
1 /** 2 * @author accountwcx@qq.com 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
HTML5滑动（swipe）事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。