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 valueOf 使用方法
Dec 28 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
通过url查找a元素并点击
Apr 09 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
AngularJs表单验证实例详解
May 30 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 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
图书管理程序(三)
2006/10/09 PHP
php构造函数的继承方法
2015/02/09 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python入门篇之函数
2014/10/20 Python
Python、Javascript中的闭包比较
2015/02/04 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
python Cartopy的基础使用详解
2020/11/01 Python
python 写一个水果忍者游戏
2021/01/13 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
教师节班会开场白
2015/06/01 职场文书
golang中的并发和并行
2021/05/08 Golang