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 事件参考手册
Dec 24 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
深入探究node之Transform
Jul 20 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
JavaScript实现筛选数组
Mar 02 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的FTP学习(一)
2006/10/09 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php include的妙用,实现路径加密
2008/07/29 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
react基本安装与测试示例
2020/04/27 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
软件工程师岗位职责
2013/11/16 职场文书
工程安全员岗位职责
2014/03/09 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
JavaScript实例 ODO List分析
2022/01/22 Javascript
详解MySQL的内连接和外连接
2023/05/08 MySQL