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.each()用法分享
Jul 31 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
jQuery实现的简单提示信息插件
Dec 08 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php把session写入数据库示例
2014/02/26 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
PHP的PDO连接讲解
2019/01/24 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
django2.0扩展用户字段示例
2019/02/13 Python
win10安装python3.6的常见问题
2020/07/01 Python
python代码实现图书管理系统
2020/11/30 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
五型班组建设方案
2014/02/10 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
护士先进个人总结
2015/02/13 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS