HTML5滑动（swipe）事件

移动H5开发中经常用到滑动效果（页面上移、下移、向左滑动、向右滑动等），浏览器并没有内置swipe事件，可以通过touch事件（touchstart、touchmove和touchend）模拟swipe效果。jQuery mobile和zeptojs提供了swipe事件。jquery mobile只有swipeLeft和swipeRight，zeptojs提供了完整的tap和swipe事件。

 /**
 * @author accountwcx@qq.com
 * http://git.oschina.net/accountwcx/rhui
 *
 * swipe事件，包括swipeLeft、swipeRight、swipeUp、swipeDown。
 * 调用方法
 * Rhui.mobile.swipeLeft(el, callback, options)
 * Rhui.mobile.swipeRight(el, callback, options)
 * Rhui.mobile.swipeUp(el, callback, options)
 * Rhui.mobile.swipeDown(el, callback, options)
 * 如果使用jQuery，调用方法
 * $(el).rhuiSwipe('swipeLeft', callback, options);
 * $(el).rhuiSwipe('swipeRight', callback, options);
 * $(el).rhuiSwipe('swipeUp', callback, options);
 * $(el).rhuiSwipe('swipeDown', callback, options);
 */
 (function(window, $){
     var Rhui = window.Rhui || {};
     window.Rhui = Rhui;
     Rhui.mobile = (function(){
         var touch = {
             distance: 30,  //滑动距离，超过该距离触发swipe事件，单位像素。
             duration: 1000 //滑动时长，超过该时间不触发swipe，单位毫秒。
         };
 
         /**
         * 绑定事件
         * @param  el        触发事件的元素
         * @param  swipe     事件名称，可选值为swipeLeft,swipeRight,swipeUp,swipeDown
         * @param  callback  事件回调函数
         * @param  isStopPropagation   是否停止冒泡，true为停止冒泡
         * @param  isPreventDefault    是否阻止默认事件，true为阻止默认事件
         * @param  triggerOnMove       swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
         *                             一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
         *                             默认是在touchend中触发。
         */
         function bindSwipe(el, swipe, callback, triggerOnMove, isStopPropagation, isPreventDefault){
             var startPoint, endPoint, timer;
 
             /**
             * 计算滑动方向
             * 首先根据x方向和y方向滑动的长度决定触发x方向还是y方向的事件。
             * 然后再判断具体的滑动方向。
             * 如果滑动距离不够长，不判断方向。
             */
             function swipeDirection(x1, y1, x2, y2){
                 var diffX = x1 - x2,
                     diffY = y1 - y2,
                     absX = Math.abs(diffX),
                     absY = Math.abs(diffY),
                     swipe;
 
                 if(absX >= absY){
                     if(absX >= touch.distance){
                         swipe = diffX > 0 ? 'swipeLeft' : 'swipeRight';
                     }
                 }else{
                     if(absY >= touch.distance){
                         swipe = diffY > 0 ? 'swipeUp' : 'swipeDown';
                     }
                 }
 
                 return swipe;
             }
 
             // 清除本次滑动数据
             function clearSwipe(){
                 startPoint = undefined;
                 endPoint = undefined;
 
                 if(timer !== undefined){
                     clearTimeout(timer);
                     timer = undefined;
                 }
             }
 
             /**
             * 判断是否符合条件，如果符合条件就执行swipe事件
             * @param  el     {HTMLElement}  元素
             * @param  event  {Event}        Touch原始事件
             * @param  return 如果执行了事件，就返回true。
             */
             function execSwipe(el, event){
                 if(startPoint && endPoint && swipeDirection(startPoint.x, startPoint.y, endPoint.x, endPoint.y) === swipe){
                     callback.call(el, event);
                     return true;
                 }
             }
 
             el.addEventListener('touchstart', function(event){
                 var self = this, touchPoint = event.touches[0];
 
                 if(isStopPropagation){
                     event.stopPropagation();
                 }
 
                 if(isPreventDefault){
                     event.preventDefault();
                 }
 
                 startPoint = {
                     x: Math.floor(touchPoint.clientX),
                     y: Math.floor(touchPoint.clientY)
                 };
 
                 timer = setTimeout(function(){
                     //如果超时，清空本次touch数据
                     clearSwipe();
                 }, touch.duration);
             });
 
             el.addEventListener('touchmove', function(event){
                 var self = this, touchPoint = event.touches[0];
 
                 if(isStopPropagation){
                     event.stopPropagation();
                 }
 
                 if(isPreventDefault){
                     event.preventDefault();
                 }
 
                 if(startPoint){
                     endPoint = {
                         x: Math.floor(touchPoint.clientX),
                         y: Math.floor(touchPoint.clientY)
                     };
 
                     //执行swipe事件判断，是否符合触发事件
                     if(triggerOnMove){
                         if(execSwipe(self, event)){
                             clearSwipe();
                         }
                     }
                 }
             });
 
             el.addEventListener('touchend', function(event){
                 if(isStopPropagation){
                     event.stopPropagation();
                 }
 
                 if(isPreventDefault){
                     event.preventDefault();
                 }
 
                 execSwipe(self, event);
                 //清除本次touch数据
                 clearSwipe();
             });
         }
 
         /**
         * @param  el        {HTMLElement}  HTML元素
         * @param  callback  {Function}     事件回调函数
         * @param  options   {Object}       可选参数
         *                   isStopPropagation  {Boolean}  是否停止冒泡，true为停止冒泡
         *                   isPreventDefault   {Boolean}  是否阻止默认事件，true为阻止默认事件
         *                   triggerOnMove      {Boolean}
         *                                       swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
         *                                       一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
         *                                       默认值为false，在touchend中触发。
         */
         touch.swipeLeft = function(el, callback, options){
             if(options){
                 bindSwipe(el, 'swipeLeft', callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
             }else{
                 bindSwipe(el, 'swipeLeft', callback);
             }
 
         };
 
         touch.swipeRight = function(el, callback, options){
             if(options){
                 bindSwipe(el, 'swipeRight', callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
             }else{
                 bindSwipe(el, 'swipeRight', callback);
             }
         };
 
         touch.swipeUp = function(el, callback, options){
             if(options){
                 bindSwipe(el, 'swipeUp', callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
             }else{
                 bindSwipe(el, 'swipeUp', callback);
             }
         };
 
         touch.swipeDown = function(el, callback, options){
             if(options){
                 bindSwipe(el, 'swipeDown', callback, options.triggerOnMove, options.isStopPropagation, options.isPreventDefault);
             }else{
                 bindSwipe(el, 'swipeDown', callback);
             }
         };
 
         return touch;
     })();
 
     // 注册jquery方法
     if($ && $.fn){
         $.fn.extend({
             /**
             * 模拟touch swipe事件，支持链式调用。
             * @param   name      {String}    swipe事件名称，值有swipLeft、swipeRight、swipeUp、swipeDown。
             * @param   callback  {Function}  swipe事件回调函数
             * @param   opts      {Object}    可选参数
             *                                isStopPropagation  {Boolean}  是否停止冒泡，true为停止冒泡
             *                                isPreventDefault   {Boolean}  是否阻止默认事件，true为阻止默认事件
             *                                triggerOnMove      {Boolean}  swipe事件有两种触发方式，一种是在touchmove过程中，只要满足滑动距离条件即触发。
             *                                                              一种是在touchend中，进入滑动距离判断，如果满足滑动距离触发。
             *                                                              默认值为false，在touchend中触发。
             */
             rhuiSwipe: function(name, callback, opts){
                 var fnSwipe = Rhui.mobile[name];
 
                 if(this.length > 0 && fnSwipe){
                     this.each(function(){
                         fnSwipe(this, callback, opts);
                     });
                 }
 
                 return this;
             }
         });
     }
 })(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	向下滑动

实例展示：

 <style>.delete { display: none; }</style>
 
 <ul id=items>
   <li>List item 1 <span class=delete>DELETE</span></li>
   <li>List item 2 <span class=delete>DELETE</span></li>
 </ul>
 
 <script>
 // show delete buttons on swipe
 $('#items li').swipe(function(){
   $('.delete').hide()
   $('.delete', this).show()
 })
 
 // delete row on tapping delete button
 $('.delete').tap(function(){
   $(this).parent('li').remove()
 })
 </script>

本文摘自死神的丧钟 http://blog.csdn.net/accountwcx/article/details/49334091