touch插件

第一种：

<script>

(function($) {

var options, Events, Touch;

options = {

x: 20,

y: 20

};

Events = ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'tap', 'longTap', 'drag'];

Events.forEach(function(eventName) {

$.fn[eventName] = function() {

var touch = new Touch($(this), eventName);

touch.start();

if (arguments[1]) {

options = arguments[1]

}

return this.on(eventName, arguments[0])

}

});

Touch = function() {

var status, ts, tm, te;

this.target = arguments[0];

this.e = arguments[1]

};

Touch.prototype.framework = function(e) {

e.preventDefault();

var events;

if (e.changedTouches) events = e.changedTouches[0];

else events = e.originalEvent.touches[0];

return events

};

Touch.prototype.start = function() {

var self = this;

self.target.on("touchstart",

function(event) {

event.preventDefault();

var temp = self.framework(event);

var d = new Date();

self.ts = {

x: temp.pageX,

y: temp.pageY,

d: d.getTime()

}

});

self.target.on("touchmove",

function(event) {

event.preventDefault();

var temp = self.framework(event);

var d = new Date();

self.tm = {

x: temp.pageX,

y: temp.pageY

};

if (self.e == "drag") {

self.target.trigger(self.e, self.tm);

return

}

});

self.target.on("touchend",

function(event) {

event.preventDefault();

var d = new Date();

if (!self.tm) {

self.tm = self.ts

}

self.te = {

x: self.tm.x - self.ts.x,

y: self.tm.y - self.ts.y,

d: (d - self.ts.d)

};

self.tm = undefined;

self.factory()

})

};

Touch.prototype.factory = function() {

var x = Math.abs(this.te.x);

var y = Math.abs(this.te.y);

var t = this.te.d;

var s = this.status;

if (x < 5 && y < 5) {

if (t < 300) {

s = "tap"

} else {

s = "longTap"

}

} else if (x < options.x && y > options.y) {

if (t < 250) {

if (this.te.y > 0) {

s = "swipeDown"

} else {

s = "swipeUp"

}

} else {

s = "swipe"

}

} else if (y < options.y && x > options.x) {

if (t < 250) {

if (this.te.x > 0) {

s = "swipeLeft"

} else {

s = "swipeRight"

}

} else {

s = "swipe"

}

}

if (s == this.e) {

this.target.trigger(this.e);

return

}

}

})(window.jQuery || window.Zepto);

 

 

</script>

第二种：

<script>

;(function(a){

    a.fn.touchwipe=function(c){

        var b={

            drag:false,

            min_move_x:20,

            min_move_y:20,

            wipeLeft:function(){/*向左滑动*/},

            wipeRight:function(){/*向右滑动*/},

            wipeUp:function(){/*向上滑动*/},

            wipeDown:function(){/*向下滑动*/},

            wipe:function(){/*点击*/},

            wipehold:function(){/*触摸保持*/},

            wipeDrag:function(x,y){/*拖动*/},

            preventDefaultEvents:true

        };

        if(c){a.extend(b,c)};

        this.each(function(){

            var h,g,j=false,i=false,e;

            var supportTouch = "ontouchstart" in document.documentElement;

            var moveEvent = supportTouch ? "touchmove" : "mousemove",

            startEvent = supportTouch ? "touchstart" : "mousedown",

            endEvent = supportTouch ? "touchend" : "mouseup"

              

              

            /* 移除 touchmove 监听 */

            function m(){

                this.removeEventListener(moveEvent,d);

                h=null;

                j=false;

                clearTimeout(e)

            };

              

            /* 事件处理方法 */

            function d(q){

                if(b.preventDefaultEvents){

                    q.preventDefault()

                };

                if(j){

                    var n = supportTouch ? q.touches[0].pageX : q.pageX;

                    var r = supportTouch ? q.touches[0].pageY : q.pageY;

                    var p = h-n;

                    var o = g-r;

                    if(b.drag){

                        h = n;

                        g = r;

                        clearTimeout(e);

                        b.wipeDrag(p,o);

                    }

                    else{

                        if(Math.abs(p)>=b.min_move_x){

                            m();

                            if(p>0){b.wipeLeft()}

                            else{b.wipeRight()}

                        }

                        else{

                            if(Math.abs(o)>=b.min_move_y){

                                m();

                                if(o>0){b.wipeUp()}

                                else{b.wipeDown()}

                            }

                        }

                    }

                }

            };

              

            /*wipe 处理方法*/

            function k(){clearTimeout(e);if(!i&&j){b.wipe()};i=false;j=false;};

            /*wipehold 处理方法*/

            function l(){i=true;b.wipehold()};

              

            function f(n){

                //if(n.touches.length==1){

                    h = supportTouch ? n.touches[0].pageX : n.pageX;

                    g = supportTouch ? n.touches[0].pageY : n.pageY;

                    j=true;

                    this.addEventListener(moveEvent,d,false);

                    e=setTimeout(l,750)

                //}

            };

              

            //if("ontouchstart"in document.documentElement){

                this.addEventListener(startEvent,f,false);

                this.addEventListener(endEvent,k,false)

            //}

        });

        return this

    };

})(jQuery);

  

/*

     调用

*/

$("#aa").touchwipe({

            wipeLeft:function(){ alert("向左滑动了")},

            wipeRight:function(){alert("向右滑动了")},

})

</script>

第三种：

<script>

/**

 * jQuery Plugin to obtain touch gestures

 * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)

 * @version 1.1.1 (9th December 2010)

 */

;(function($, undefined){

   $.fn.touchwipe = function(settings) {

     var config = {

            min_move_x: 50,

            min_move_y: 20,

            wipeLeft: function() { },

            wipeRight: function() { },

            preventDefaultEvents: false

     };

      

     if (settings) $.extend(config, settings);

  

     this.each(function() {

         var startX;

         var startY;

         var isMoving = false;

         var directionLocked = null;

 

         function cancelTouch() {

             this.removeEventListener('touchmove', onTouchMove);

             startX = null;

             isMoving = false;

             directionLocked = false;

         } 

          

         function onTouchMove(e) {

             if(config.preventDefaultEvents) {

                 e.preventDefault();

             }

             if(isMoving) {

                 var x = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;

                 var y = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;

                 var dx = startX - x;

                 var dy = startY - y;

                  

                var absDistX = Math.abs(dx);

                var absDistY = Math.abs(dy);

 

                if (directionLocked === "y") {

                    return

                } else {

                    if (directionLocked === "x") {

                        e.preventDefault()

                    } else {

                        absDistX = Math.abs(dx);

                        absDistY = Math.abs(dy);

                        if (absDistX < 4) {

                            return

                        }

                        if (absDistY > absDistX ) {

                            dx = 0;

                            directionLocked = "y";

                            return

                        } else {

                            e.preventDefault();

                            directionLocked = "x"

                        }

                    }

                }

 

                if(absDistX >= config.min_move_x) {

                    cancelTouch();

                    if(dx > 0) {

                        config.wipeLeft();

                    }

                    else {

                        config.wipeRight();

                    }

                 }

             }

         }

          

         function onTouchStart(e)

         {

             if (e.touches.length == 1) {

                 startX = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;

                 startY = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;

                 isMoving = true;

                 directionLocked = false;

                 this.addEventListener('touchmove', onTouchMove, false);

             }

         }      

         if ('ontouchstart' in document.documentElement) {

             this.addEventListener('touchstart', onTouchStart, false);

         }

     });

  

     return this;

   };

 })(jQuery);

<br><br>