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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
node+express制作爬虫教程
Nov 11 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
vue3.0 上手体验
Sep 21 Javascript
vue实现无缝轮播效果(跑马灯)
May 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/03/23 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
node中modules.exports与exports导出的区别
2018/06/08 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python @property使用方法解析
2019/09/17 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
护士求职推荐信范文
2013/11/23 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
小学生检讨书大全
2014/02/06 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
文明好少年事迹材料
2014/08/19 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
军训新闻稿范文
2015/07/17 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
PHP控制循环操作的时间
2021/04/01 PHP