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

判断手机和pc端的不同,事件也不同

时间:2015-01-04 17:22:15      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:前端开发   浏览器   手机   

判断是否为手机:

function isMobile(){
   var sUserAgent= navigator.userAgent.toLowerCase(),
   bIsIpad= sUserAgent.match(/ipad/i) == "ipad",
   bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os",
   bIsMidp= sUserAgent.match(/midp/i) == "midp",
   bIsUc7= sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4",
   bIsUc= sUserAgent.match(/ucweb/i) == "ucweb",
   bIsAndroid= sUserAgent.match(/android/i) == "android",
   bIsCE= sUserAgent.match(/windows ce/i) == "windows ce",
   bIsWM= sUserAgent.match(/windows mobile/i) == "windows mobile",
   bIsWebview = sUserAgent.match(/webview/i) == "webview";
   return (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
  }


判断使用那种事件:
var touchStart,touchMove,touchEnd;
  touchStart = isMobile() ? ‘touchstart‘ : ‘mousedown‘;
  touchMove = isMobile() ? ‘touchmove‘ : ‘mousemove‘;
  touchEnd = isMobile() ? ‘touchend‘ : ‘mouseup‘;


三种事件的相应处理:
touchstart:function(e){
    var e=e || window.event;    //要判断使用哪种event
    stopDefault(e);                    //不同的浏览器,阻止浏览器默认事件方法不同
   
    if(isMobile()){                    //如果是手机
     var touch=e.touches[0];
     this.y1=touch.pageY
    }else{
     this.y1=e.pageY;            //如果不是手机
    }
    this.y2=0;
   },
   touchmove:function(e){
    var e=e || window.event;
    stopDefault(e);
    if(isMobile()){
     var touch=e.touches[0];
     this.y2=touch.pageY;
    }else{
     this.y2=e.pageY;
    }
   },

   touchend:function(e){
    var e=e || window.event;
    stopDefault(e);
    if(this.y2==0){
     return;
    }
    var diffY=this.y2-this.y1;
    if(diffY>50){
     this.doNext();
    }else if(diffY<-50){
     this.doPrev();
    }
    this.y1=0,
    this.y2=0;
   },

阻止浏览器默认事件方法:
function stopDefault(e){
      var e=e || window.event;
   if(e.preventDefault){
    e.preventDefault();
   }else{
    e.returnValue=false;
   }
  }

判断手机和pc端的不同,事件也不同

标签:前端开发   浏览器   手机   

原文地址:http://blog.csdn.net/wuweitiandian/article/details/42392565

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