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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
extjs 为某个事件设置拦截器
Jan 15 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
vue+element实现表单校验功能
May 20 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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
咖啡的化学
2021/03/03 咖啡文化
简单的PHP缓存设计实现代码
2011/09/30 PHP
解析php常用image图像函数集
2013/06/24 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php树型类实例
2014/12/05 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
$()JS小技巧
2007/07/21 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
jquery使用经验小结
2015/05/20 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
python使用thrift教程的方法示例
2019/03/21 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
EntityManager都有哪些方法
2013/11/01 面试题
《和我们一样享受春天》教学反思
2014/02/07 职场文书
餐饮营销方案
2014/02/23 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
钢琴师观后感
2015/06/12 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android