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 相关文章推荐
最简单的jQuery程序 入门者学习
Jul 09 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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
php5.2.0内存管理改进
2007/01/22 PHP
php异常处理使用示例
2014/02/25 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
OpenCV实现人脸识别
2017/04/07 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
美国钻石商店:Zales
2016/11/20 全球购物
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
教师求职自荐信
2014/03/09 职场文书
产品质量承诺范本
2014/03/31 职场文书
校本研修个人总结
2015/02/28 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技