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 相关文章推荐
js post方式传递提交的实现代码
May 31 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
微信小程序实现电子签名并导出图片
May 27 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
浅析node.js中close事件
2014/11/26 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
js实现简单点赞操作
2020/03/17 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
Python机器学习之决策树算法
2017/12/22 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python 实现两个npy档案合并
2020/07/01 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
公司培训欢迎词
2014/01/10 职场文书
保险公司开门红口号
2014/06/21 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
2019广播稿怎么写
2019/04/17 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
Python 全局空间和局部空间
2022/04/06 Python