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 EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
javascript常用对话框小集
Sep 13 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 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
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
go语言计算两个时间的时间差方法
2015/03/13 Python
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Django返回HTML文件的实现方法
2020/09/17 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
三维科技面试题
2013/07/27 面试题
2015年元旦文艺汇演主持词
2014/03/26 职场文书
临床医师个人自我评价
2014/04/06 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
实习介绍信范文
2015/05/05 职场文书