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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
详解a++和++a的区别
Aug 30 Javascript
js数据类型检测总结
Aug 05 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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/02/24 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
2010/11/25 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
学习jQuey中的return false
2015/12/18 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
tab栏切换原理
2017/03/22 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
跟老齐学Python之集合的关系
2014/09/24 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python实现倒计时小工具
2019/07/29 Python
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
简爱电影观后感
2015/06/10 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书