当前位置: 首页 > 编程笔记 >

js判断手机和pc端选择不同执行事件的方法

钱欣然
2023-03-14
本文向大家介绍js判断手机和pc端选择不同执行事件的方法,包括了js判断手机和pc端选择不同执行事件的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了js判断手机和pc端选择不同执行事件的方法。分享给大家供大家参考。具体如下:

判断是否为手机:

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;
 }
}

希望本文所述对大家的javascript程序设计有所帮助。

 类似资料:
  • 本文向大家介绍详解JS判断页面是在手机端还是在PC端打开的方法,包括了详解JS判断页面是在手机端还是在PC端打开的方法的使用技巧和注意事项,需要的朋友参考一下 我们想要的效果是pc文件和mobile文件统一入口,适配不同的设备。 先看看项目的目录: 在index.html里面配置js控制选择那一个文件夹下的文件就可以了。 我们要利用:Navigator 对象,Navigator 对象包含有关浏览器

  • 本文向大家介绍js判断手机号运营商的方法,包括了js判断手机号运营商的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js判断手机号运营商的方法。分享给大家供大家参考。具体如下: 在做WEB项目时,有时候需要根据用户的输入手机号码判断该号的运营商是移动、联通、电信或其他,再根据不同的运营商做出相应的处理,下面介绍js中如何判断手机号的运营商的代码。 js实现方法: 希望本文所述对大家的

  • 本文向大家介绍JS实现判断移动端PC端功能,包括了JS实现判断移动端PC端功能的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了JS实现判断移动端PC端功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 博客上的小精灵看起来很可耐,用了两年了现在才知道用移动端看的话会挡着屏幕,既然知道了就要改进咯。 判断是pc 还是移动端 或者 以上就

  • 本文向大家介绍js判断是否是手机页面,包括了js判断是否是手机页面的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看代码: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍JS实现判断滚动条滚到页面底部并执行事件的方法,包括了JS实现判断滚动条滚到页面底部并执行事件的方法的使用技巧和注意事项,需要的朋友参考一下 需要了解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。 clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部

  • 本文向大家介绍js全选实现和判断是否有复选框选中的方法,包括了js全选实现和判断是否有复选框选中的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js全选实现和判断是否有复选框选中的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的javascript程序设计有所帮助。