移动端笔记——jQuery touch事件

判断移动端还是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();
     
});<br>
$(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,看如下代码:

`··

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 触摸事件: 三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件: 1.touchstart:手指放在一个DOM...
    晨光2016阅读 24,057评论 0 13
  • 一:移动端基础事件1.touchstart 手指触摸 == mousedown2.touchend 手指抬起 ==...
    张宪宇阅读 924评论 0 2
  • 基于html5的移动web页面搭建技术总结1.技术要点1.1面向不同尺寸的手机屏幕,页面布局适配问题。 网页的he...
    敲代码的张阅读 325评论 0 0
  • 基于html5的移动web页面搭建技术总结 1.技术要点 1.1面向不同尺寸的手机屏幕,页面布局适配问题。 网页的...
    敲代码的张阅读 1,532评论 0 3
  • 怀念不一定要相见,喜欢不一定要在一起,你要相信,每一种距离,都有它存在的意义。
    零雨淇蒙阅读 109评论 0 3