移动端js触摸事件详解(3)

changedTouches、targetTouches和touches分别包含稍微不同的触摸列表。targetTouches和touches分别包含当前位于 屏幕上的手指列表,但changedTouches仅列出最后发生的触摸。如果你在使用touchend或者gestureend事件,那么这个属性 非常重要。在这两种情况下,屏幕上都不会再出现手指,因此targetTouches和touches应该为空,但你仍然可以通过查看 changedTouches数组来了解最后发生的事情。 

由于触摸属性都会生成数组,因此你可以使用JavaScript数组函数来访问它们。这意味着,event.touches[0]将返回第一次 触摸,并且可以使用event.touches.length来计算当前存储的触摸数量。 

查看单独触摸时,通过使用event.targetTouches[0],你也可以访问其它触摸,每个触摸会包含一些具体信息, 

clientX、clientY 相对于当前屏幕的X或Y位置 pageX、pageY 相对于整体页面的X或Y位置 screenX、screenY 相对于用户计算机屏幕的X或Y位置 identifier 事件的唯一标识符 target 生成触摸的目标对象 

手势事件的事件对象会比普通触摸事件多两个属性,rotation 手指的旋转角度 scale 放缩的值

转载文章:JavaScript触摸与手势事件

iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件。因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互网页时,常规的鼠标和键盘事件根本不够用。随着Android中的WebKit的加入,很多这样的专有事件变成了事实标准。 

1.触摸事件

包含iOS2.0软件的iPhone 3G发布时,也包含了一个新版本的Safari浏览器。这款新的移动Safari提供了一些与触摸(touch)操作相关的新事件。后来,Android上的浏览器也实现了相同的事件。触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说,有以下几个触摸事件。 

touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。 
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用preventDefault()可阻止滚动。 
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件,文档中没有明确说明。 

上面这几个事件都会冒泡,也都可以取消。虽然这些触摸事件没有在DOM规范中定义,但它们却是以兼容DOM的方式实现的。因此,每个触摸事件没有在DOM规范中定义,但它们却是以兼容DOM的方式实现的。因此,每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。 

除了常见的DOM属性外,触摸事件还包含下列三个用于跟踪触摸的属性。 
touches:表示当前跟踪的触摸操作的Touch对象的数组。 
targetTouches:特定于事件目标的Touch对象的数组。 
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。 

每个Touch对象包含下列属性。 
clientX:触摸目标在视口中的X坐标。 
clientY:触摸目标在视口中的Y坐标。 
identifier:表示触摸的唯一ID。 
pageX:触摸目标在页面中的x坐标。 
pageY:触摸目标在页面中的y坐标。 
screenX:触摸目标在屏幕中的x坐标。 
screenY:触摸目标在屏幕中的y坐标。 
target:触摸的DOM节点坐标。 

使用这些属性可以跟踪用户对屏幕触摸操作。来看下面的例子。

function handleTouchEvent(event) { //只跟踪一次触摸 if (event.touches.length == 1) { var output = document.getElementById("output"); switch (event.type) { case "touchstart": output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; case "touchend": output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")"; break; case "touchmove": event.preventDefault(); //阻止滚动 output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; break; } } } document.addEventListener("touchstart", handleTouchEvent, false); document.addEventListener("touchend", handleTouchEvent, false); document.addEventListener("touchmove", handleTouchEvent, false);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjfdd.html