判断移动端还是pc端
function IsPC()
{
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
}
        $(document).bind(touchEvents.touchstart, function (event) {
event.preventDefault(); });
$(document).bind(touchEvents.touchmove, function (event) {
event.preventDefault(); }); $(document).bind(touchEvents.touchend, function (event) {
event.preventDefault(); });

很多博文中称touch的三个事件都有targetTouches,touches以及changedTouches对象列表,其实不然,touchend事件中应该是只有个changedTouches触摸实例列表的,而且这里说明一下,回调函数的event只是一个普通的object对象,实际上event中有一个originalEvent属性,这才是真正的touch事件,这个事件中才存在着上诉三个触摸实例列表,这三个实例存储了触摸事件的位置等等属性,类似于鼠标事件。其他地方基本与鼠标事件是一致的。简单介绍一下这三个触摸列表,touches是在屏幕上的所有手指列表,targetTouches是当前DOM上的手指列表,所以当手指移开触发touchend事件时,event.originalEvent是没有这个targetTouches列表的,而changedTouches列表是涉及当前事件的列表,例如touchend事件中,手指移开。接下来谈谈pc与移动端的适配问题,既然使用html5,当然是看中他的跨平台特性了,不仅仅要ios和android适配,pc上直接打开网页最好也是可以的,但是pc上只支持鼠标事件怎么办。好办,仔细观察上面代码的触摸事件,touchEvents.touchXXX,看如下代码:

var touchEvents = {
touchstart: "touchstart",
touchmove: "touchmove",
touchend: "touchend", /**
* @desc:判断是否pc设备,若是pc,需要更改touch事件为鼠标事件,否则默认触摸事件
*/
initTouchEvents: function () {
if (isPC()) {
this.touchstart = "mousedown";
this.touchmove = "mousemove";
this.touchend = "mouseup";
}
}
};

若在pc上,则使用鼠标事件,在移动设备中,就使用触摸事件,就这么简单。

 出处:http://blog.csdn.net/jiangcs520/article/details/17564065
 

  

  

最新文章

  1. 微信webview
  2. listview的用法
  3. iOS @property的默认属性
  4. 基于netty的微服务架构
  5. RHEL7文件权限
  6. 微课程--Android--Android概述
  7. 利用ADO.NET导出大批量数据
  8. LeetCode Implement Queue using Stacks (数据结构)
  9. React Native学习-将 &#39;screen&#39;, &#39;window&#39; or a view生成图片
  10. [转]NHibernate之旅(9):探索父子关系(一对多关系)
  11. UVA11387 - The 3-Regular Graph(推理)
  12. ThinkPHP配置项(六)
  13. xcode 6 改动组织及开发人员
  14. 《图解HTTP》读书笔记(二:各种协议与HTTP协议之间的关系)
  15. 【PAT】B1011 A+B 和 C
  16. 关于MySQL锁的详解
  17. Tomcat多应用启动报错:org.apache.catalina.loader.WebappClassLoaderBase.checkStateForResourceLoading Illegal access: this web application instance has been stopped already. Could not load [].
  18. Ubuntu 14.04 apt-get更换阿里云源
  19. (转)FIKKER和Nginx的反向代理服务功能对比评测报告
  20. VC下遍历文件夹中的所有文件的几种方法

热门文章

  1. Spark Standalone与Spark on YARN的几种提交方式
  2. Storm实战
  3. mogndb 慢查询
  4. 马尔科夫毯(Markov Blanket)
  5. Jafka Broker代码阅读之总览
  6. tree的使用
  7. phpStorm格式化代码快捷键
  8. C# 文件读写操作整理
  9. App上传到应用宝的一些问题
  10. Http服务器实现文件上传与下载(二)