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


Posted in Javascript onJanuary 30, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
移动端界面的适配
Jan 11 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
项目中常用的JS方法整理
Jan 30 #Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 #Javascript
jquery实现拖拽调整Div大小
Jan 30 #Javascript
jQuery中$.click()无效问题分析
Jan 29 #Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 #Javascript
js操作滚动条事件实例
Jan 29 #Javascript
jQuery调取jSon数据并展示的方法
Jan 29 #Javascript
You might like
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php中动态调用函数的方法
2015/03/16 PHP
PHP生成plist数据的方法
2015/06/16 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
javascript时区函数介绍
2012/09/14 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
js实现日期级联效果
2014/01/23 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
pandas通过索引进行排序的示例
2018/11/16 Python
Python mutiprocessing多线程池pool操作示例
2019/01/30 Python
简单介绍django提供的加密算法
2019/12/18 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
详解Anaconda 的安装教程
2020/09/23 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
NET程序员上机面试题
2015/05/23 面试题
七年级历史教学反思
2014/02/05 职场文书
晚会主持词开场白
2014/03/17 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python