近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成app也毫无压力。原本以为touch事件应该跟鼠标事件是一样的道理,实践过程中虽然不难,但还是碰到了不少坑,才发现还是略有区别的。

$(document).bind(touchEvents.touchstart, function (event) {
event.preventDefault(); });
$(document).bind(touchEvents.touchmove, function (event) {
event.preventDefault(); }); $(document).bind(touchEvents.touchend, function (event) {
event.preventDefault(); });/* 何问起 hovertree.com */

很多博文中称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";
}
}
};
/* hwq2.com */

若在pc上,则使用鼠标事件,在移动设备中,就使用触摸事件,就这么简单,判断是否pc也很方便,就不做多解释了。

使用示例:http://www.cnblogs.com/roucheng/p/texiao.html

touchstart,touchmove,touchend触摸事件的小小实践心得的更多相关文章

  1. 移动端的touchstart,touchmove,touchend事件中的获取当前touch位置

    前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...

  2. 获取touchstart,touchmove,touchend 坐标

    简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值: jQuery 代码: $('#id').on('touchstart',funct ...

  3. 移动端touchstart,touchmove,touchend

    近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成 ...

  4. 手机端touchstart,touchmove,touchend事件,优化用户划入某个可以点击LI的效果

    在我们滑动手机的时候,如果LI或者DIV标签可以点击,那么在移动端给用户一个效果 /*id为添加效果LI上的UL的ID,或者是当前DIV的ID*/ function doTouchPublic(id) ...

  5. touchstart,touchmove,touchend事件 写法

    jQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  6. JQuery 获取touchstart,touchmove,touchend 坐标

    JQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  7. jQuery的touchstart,touchmove,touchend的获取位置

    $('#webchat_scroller').on('touchstart',function(e) { var touch = e.originalEvent.targetTouches[0]; v ...

  8. JQuery获取touchstart,touchmove,touchend坐标

    $('#id').on('touchstart',function(e) { ].pageX; }); JQuery如上. document.getElementById("id" ...

  9. JS事件监听手机屏幕触摸事件 Touch

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

随机推荐

  1. ABP理论学习之实体类

    返回总目录 本篇目录 实体类 惯例接口 审计 软删除 激活/未激活 IEntity接口 实体是DDD(领域驱动设计)的核心概念之一.Eirc Evans是这样描述的实体的:"它根本上不是通过 ...

  2. .NET垃圾回收(GC)原理

    作为.NET进阶内容的一部分,垃圾回收器(简称GC)是必须了解的内容.本着“通俗易懂”的原则,本文将解释CLR中垃圾回收器的工作原理. 基础知识 托管堆(Managed Heap) 先来看MSDN的解 ...

  3. Spark算子选择策略

    摘要  1.使用reduceByKey/aggregateByKey替代groupByKey 2.使用mapPartitions替代普通map 3.使用foreachPartitions替代forea ...

  4. SQL Server 解读【已分区索引的特殊指导原则】(1)- 索引对齐

    一.前言 在MSDN上看到一篇关于SQL Server 表分区的文档:已分区索引的特殊指导原则,如果你对表分区没有实战经验的话是比较难理解文档里面描述的意思.这里我就里面的一些概念进行讲解,方便大家的 ...

  5. IOS下载查看PDF文件(有下载进度)

    IOS(object-c) 下载查看 PDF 其实还是蛮容易操作的.在下载前,首先要把 IOS 可以保存文件的目录给过一遍: IOS 文件保存目录 IOS 可以自定义写入的文件目录,是很有限的,只能是 ...

  6. contains与compareDocumentPosition

    Sizzle中有一个contains方法(jQuery.contains),用来遍历是否包含指定的元素 IE率先引入一个contains()方法,可以在节点中查找某一个节点是不是当前节点的厚点,如果 ...

  7. 实现python中的map函数

    假设Python没有提供map()函数,自行编写my_map()函数实现与map()相同的功能.以下代码在Python 2.7.8中实现. 实现代码: def my_map(fun,num): i = ...

  8. 操作系统页面置换算法(opt,lru,fifo,clock)实现

    选择调出页面的算法就称为页面置换算法.好的页面置换算法应有较低的页面更换频率,也就是说,应将以后不会再访问或者以后较长时间内不会再访问的页面先调出. 常见的置换算法有以下四种(以下来自操作系统课本). ...

  9. 门外汉的IT

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 计算机很早就走入了我的生活.小学时,家里放一台联想“天琴”的电脑.它霸气的音箱造型 ...

  10. 辨析relative与absolute

    谈起它们,想必大家都不陌生.relative,相对定位嘛:absolute,绝对定位嘛.但是它们到底是个啥东东呢? 看看w3c的定义,见下表 定位 含义 relative 元素框偏移某个距离.元素仍保 ...