阅读排行
首页 > 技术文章

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

文章来自：http://www.cnblogs.com/zhaiminqian/p/zhaiminqian2.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案：鲁ICP备09046678号-3