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 循环读取JSON数据的代码
Jul 17 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
项目中常用的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 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP实现懒加载的方法
2015/03/07 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
js评分组件使用详解
2017/06/06 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
简明 Python 基础学习教程
2007/02/08 Python
用Python写冒泡排序代码
2016/04/12 Python
Python元组知识点总结
2019/02/18 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
python和js交互调用的方法
2020/06/23 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
服装设计师职业生涯规划范文
2014/02/28 职场文书