这篇文章主要为大家详细介绍了 javascript 移动开发中 touch 触摸事件,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生,并且只能是事件处理函数内部访问,在所有事件处理函数运行结束后,事件对象就被销毁!
originalEvent 对象
在一次偶然的使用中,我发现当使用 on() 函数并且传入第二个选择器参数时, e.touches[0] 的访问为 undefined,打印 e 发现,它的事件对象不是原生的事件对象。经查阅发现它是 jquery 事件对象。
- $(window).on("touchstart", "body",
- function(e) {
- console.log(e)
- })
上面例子中 event 中有一个 originalEvent 属性,而这才是真正的 touch 事件。jQuery.Event 是一个构造函数,其创建一个可读写的 jQuery 事件对象,并在 event 对象保留了对这个原生事件对象 event 的引用 ($event.originalEvent)。我们绑定的事件处理程序所处理的事件对象都是 $event。该方法也可以传递一个自定义事件的类型名,用于生成用户自定义事件对象。
touch 事件
touchmove: 当手指在屏幕上滑动的时候连续地触发。
touchstart: 当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发
touchend: 当手指从屏幕上离开的时候触发。
TouchEvent 对象
每一个 touch 事件的触发都会产生一个 TouchEvent 对象,以下是 TouchEvent 对象三个比较常用的重要属性
touches 当前位于屏幕上的所有手指的一个列表。
targetTouches 特定于事件目标的 Touch 对象的数组。[当前手指]
changeTouches 表示自上次触摸以来发生了什么改变的 Touch 对象的数组。
在这里,我用 js 写了一个 touch 事件,点击屏幕可触发, 将其事件事件对象在控制台打印出,结果如下(箭头指向的是上述三个属性):
- window.addEventListener("touchstart",
- function(event) {
- console.log(event);
- })
触摸事件对象属性
touches、targetTou、changeTouches 都包含以下属性值
clientX:触摸目标在视口中的 x 坐标。
clientY:触摸目标在视口中的 y 坐标。
identifier:标识触摸的唯一 ID。
pageX:触摸目标在页面中的 x 坐标。
pageY:触摸目标在页面中的 y 坐标。
screenX:触摸目标在屏幕中的 x 坐标。
screenY:触摸目标在屏幕中的 y 坐标。
target:触摸的 DOM 节点目标。
还是上面的那个例子,changeTouches 对象在控制台输出如下:
来源: http://www.phperz.com/article/17/0405/266644.html