码迷,mamicode.com
首页 > 移动开发 > 详细

手机的touch事件(基于jquery)

时间:2014-07-26 13:49:55      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:style   blog   java   color   io   for   art   cti   

javascript代码:

$.swipe=function(opt){
  var o = $.extend({
    mainSelector:"",
    swipeLeft:function(e,v){},
    swipeRight:function(e,v){},
    swipeEnds:function(v,e){}
}, opt || {});
  var startX=0,startY=0;
var obj={
    touchStart: function (e){
        var touchx= e.touches[0].pageX;
        var touchy= e.touches[0].pageY;
        startX = parseInt(touchx,10);
        startY = parseInt(touchy,10);
    },
    touchMove:function(e){
        var touchmx= e.touches[0].pageX,
        touchmy= e.touches[0].pageY,
        dirX=parseInt(touchmx-startX,10);
        dirY=parseInt(touchmy-startY,10);
        if(dirX<0){
            o.swipeLeft(e,dirX);
        }else{
           o.swipeRight(e,dirX);
        }
        
        if(dirY<0){
            o.swipeTop(e,dirY);
        }else{
            o.swipeBottom(e,dirY);
        }
    },
    touchEnd:function(e){
       o.swipeEnds(e);
    },
    bindEvent:function(els){
        var elem=$(els);
        for(var i=0,_len=elem.length;i<_len;i++){
          elem[i].addEventListener(‘touchstart‘, obj.touchStart, false);
          elem[i].addEventListener(‘touchmove‘, obj.touchMove, false);
          elem[i].addEventListener(‘touchend‘, obj.touchEnd, false);
        }
    }
};
obj.bindEvent(o.mainSelector);
return obj;
}; 

 

传入的是选择器和swipeLeft,swipeRight的回调事件

手机的touch事件(基于jquery),布布扣,bubuko.com

手机的touch事件(基于jquery)

标签:style   blog   java   color   io   for   art   cti   

原文地址:http://www.cnblogs.com/heimanba/p/3869597.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!