JS触摸与手势事件详解
本文为大家分享了JS触摸与手势事件,供大家参考,具体内容如下
1.触摸事件
包含iOS2.0软件的iPhone3G发布时,也包含了一个新版本的Safari浏览器。这款新的移动Safari提供了一些与触摸(touch)操作相关的新事件。后来,Android上的浏览器也实现了相同的事件。触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说,有以下几个触摸事件。
touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间,调用preventDefault()可以阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发时间,文档中没有明确说明。
以上的几个事件都是会冒泡的,也都可以取消。虽然这些触摸事件没有在DOM中定义,但让他们却是以兼容DOM的方式实现的。因此,每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey、metaKey。
除了常见的DOM属性,触摸事件还包含下列三个用于跟踪触摸的属性。
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouchs:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含下列属性。
clientX:触摸目标在视口中的x坐标。
clientY:触摸目标在视口中的y坐标。
identifier:标识触摸的唯一ID。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点目标。
使用这些属性可以跟踪用户对屏幕的触摸操作。来看下面的例子。
functionhandleTouchEvent(event){ //只跟踪一次触摸 if(event.touches.length==1){ varoutput=document.getElementById("output"); switch(event.type){ case"touchstart": output.innerHTML="Touchstarted("+event.touches[0].clientX+ ","+event.touches[0].clientY+")"; break; case"touchend": output.innerHTML+="
Touchended("+ event.changedTouches[0].clientX+","+ event.changedTouches[0].clientY+")"; break; case"touchmove": event.preventDefault();//阻止滚动 output.innerHTML+="
Touchmoved("+ event.changedTouches[0].clientX+","+ event.changedTouches[0].clientY+")"; break; } } } EventUtil.addHandler(document,"touchstart",handleTouchEvent); EventUtil.addHandler(document,"touchend",handleTouchEvent); EventUtil.addHandler(document,"touchmove",handleTouchEvent);
以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见,只会在有一次活动触摸操作的情况下输出信息。当touchstart事件发生时,会将触摸的位置信息输出到
这些事件会在文档的所有元素上面触发,因而可以分别操作页面的不同部分。在触摸屏幕上的元素时,这些事件(包括鼠标事件)发生的顺序如下:
(1)touchstart
(2)mouseover
(3)mousemove(一次)
(4)mousedown
(5)mouseup
(6)click
(7)touchend
支持触摸事件的浏览器包括iOS版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerryWebKit、OperaMobile10.1+和LG专有OS中的Phantom浏览器。
2.手势事件
iOS2.0中的Safari还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势,手势通常会改变显示项的大小,或者旋转显示项。有三个手势事件,分别介绍如下。
gesturestart:当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。
gestureend:当任何一个手指从屏幕上面移开时触发。
只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序,意味着两个手指必须同时位于该元素的范围之内,才能触发手势事件(这个元素就是目标)。由于这些事件冒泡,所以将事件处理程序放在文档上也可以处理所有手势事件。此时,事件的目标就是两个手指都位于其范围内的那个元素。
触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时,会触发touchstart事件。如果另一个手指又放在了屏幕上,则会先触发gesturestart事件,随后触发基于该手指的touchstart事件。如果一个或两个手指在屏幕上滑动,将会触发gesturechange事件。但只要有一个手指移开,就会触发gestureend事件,紧接着又会触发基于该手指的touchend事件。
与触摸事件一样,每个手势事件的event对象都包含着标准的鼠标事件属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。此外,还包含两个额外的属性:rotation和scale。其中,rotation属性表示手指变化引起的旋转角度,负值表示逆时针旋转,正值表示顺时针旋转(该值从0开始)。而scale属性表示两个手指间距离的变化情况(例如向内收缩会缩短距离);这个值从1开始,并随距离拉大而增长,随距离缩短而减小。
下面是使用手势事件的一个示例。
functionhandleGestureEvent(event){ varoutput=document.getElementById("output"); switch(event.type){ case"gesturestart": output.innerHTML="Gesturestarted(rotation="+event.rotation+ ",scale="+event.scale+")"; break; case"gestureend": output.innerHTML+="
Gestureended(rotation="+event.rotation+ ",scale="+event.scale+")"; break; case"gesturechange": output.innerHTML+="
Gesturechanged(rotation="+event.rotation+ ",scale="+event.scale+")"; break; } } document.addEventListener("gesturestart",handleGestureEvent,false); document.addEventListener("gestureend",handleGestureEvent,false); document.addEventListener("gesturechange",handleGestureEvent,false);
与前面演示触摸事件的例子一样,这里的代码只是将每个事件都关联到同一个函数中,然后通过该函数输出每个事件的相关信息。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。