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 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
JS中的phototype详解
Feb 04 Javascript
Vue学习笔记进阶篇之过渡状态详解
Jul 14 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 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实现单链表的实例代码
2013/03/22 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
php使用GeoIP库实例
2014/06/27 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
django 多数据库配置教程
2018/05/30 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
python实现程序重启和系统重启方式
2020/04/16 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
群众路线批评与自我批评
2014/02/06 职场文书
运动会邀请函范文
2014/02/06 职场文书
如何写好自荐信
2014/04/07 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
导游词怎么写
2015/02/04 职场文书
承诺书模板大全
2015/05/04 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫