js 判断手势_JS触摸与手势事件详解

最新推荐文章于 2024-09-12 15:59:09 发布

洛斯里克甜面包

最新推荐文章于 2024-09-12 15:59:09 发布

阅读量887

点赞数

文章标签： js 判断手势

本文链接：https://blog.csdn.net/weixin_32480781/article/details/111892402

版权

本文详细介绍了JavaScript中处理触摸和手势事件的原理与实践，包括touchstart、touchmove、touchend、touchcancel等触摸事件，以及gesturestart、gesturechange、gestureend等手势事件。通过示例代码展示了如何跟踪和响应用户的触摸操作，以及如何利用事件属性进行交互反馈。

摘要由CSDN通过智能技术生成

本文为大家分享了JS触摸与手势事件，供大家参考，具体内容如下

1.触摸事件

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

touchstart ：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。

touchmove ：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用 preventDefault()可以阻止滚动。

touchend ：当手指从屏幕上移开时触发。

touchcancel ：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。

以上的几个事件都是会冒泡的，也都可以取消。虽然这些触摸事件没有在ＤＯＭ中定义，但让他们却是以兼容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 节点目标。

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

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 += "
Touch ended (" +

event.changedTouches[0].clientX + "," +

event.changedTouches[0].clientY + ")";

break;

case "touchmove":

event.preventDefault(); //阻止滚动

output.innerHTML += "
Touch moved (" +

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 事件发生时，会将触摸的位置信息输出到

元素中。当 touchmove 事件发生时，会取消其默认行为，阻止滚动(触摸移动的默认行为是滚动页面)，然后输出触摸操作的变化信息。而 touchend 事件则会输出有关触摸操作的最终信息。注意，在 touchend 事件发生时， touches集合中就没有任何 Touch 对象了，因为不存在活动的触摸操作；此时，就必须转而使用 changeTouchs集合。

这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素时，这些事件(包括鼠标事件)发生的顺序如下：

(1) touchstart

(2) mouseover

(3) mousemove (一次)

(4) mousedown

(5) mouseup

(6) click

(7) touchend

支持触摸事件的浏览器包括 iOS 版 Safari、Android 版 WebKit、bada 版 Dolfin、OS6+中的 BlackBerryWebKit、Opera Mobile 10.1+和 LG 专有 OS 中的 Phantom浏览器。

2. 手势事件

iOS 2.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 开始，并随距离拉大而增长，随距离缩短而减小。

下面是使用手势事件的一个示例。

function handleGestureEvent(event){

var output = document.getElementById("output");

switch(event.type){

case "gesturestart":

output.innerHTML = "Gesture started (rotation=" + event.rotation +

",scale=" + event.scale + ")";

break;

case "gestureend":

output.innerHTML += "
Gesture ended (rotation=" + event.rotation +

",scale=" + event.scale + ")";

break;