事件之触摸及手势事件

一触摸事件

触发场景：当手指放在屏幕上、在屏幕上滑动或从屏幕移开时，触摸事件即会触发

触摸事件：

事件	定义
touchstar	手指放到屏幕上时触发（即使有一个手指已经放在了屏幕上）
touchmove	手指在屏幕上滑动时连续触发。在这个事件中调用 preventDefault()可以阻止滚动
touchend	手指从屏幕上移开时触发
touchcancel	系统停止跟踪触摸时触发。文档中并未明确什么情况下停止跟踪

属性大全：

鼠标事件的公共属性：bubbles、 cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey
用于跟踪触点的属性
- touches：Touch 对象的数组，表示当前屏幕上的每个触点
- targetTouches：Touch 对象的数组，表示特定于事件目标的触点
- changedTouches：Touch 对象的数组，表示自上次用户动作之后变化的触点。
- 每个 Touch 对象都包含下列属性:
  - clientX：触点在视口中的 x 坐标
  - clientY：触点在视口中的 y 坐标
  - identifier：触点 ID
  - pageX：触点在页面上的 x 坐标
  - pageY：触点在页面上的 y 坐标
  - screenX：触点在屏幕上的 x 坐标
  - screenY：触点在屏幕上的 y 坐标
  - target：触摸事件的事件目标。

触发顺序：当手指点触屏幕上的元素时，依次会发生如下事件（包括鼠标事件）

(1) touchstart
(2) mouseover
(3) mousemove（1 次）
(4) mousedown
(5) mouseup
(6) click
(7) touchend

function handleTouchEvent(event) { // 只针对一个触点if (event.touches.length == 1) { let output = document.getElementById("output"); switch(event.type) { case "touchstart": output.innerHTML += `<br>Touch started:` + `(${event.touches[0].clientX}` + ` ${event.touches[0].clientY})`; break; case "touchend": output.innerHTML += `<br>Touch ended:` + `(${event.changedTouches[0].clientX}` + ` ${event.changedTouches[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);
document.addEventListener("touchend", handleTouchEvent);
document.addEventListener("touchmove", handleTouchEvent); // 以上代码会追踪屏幕上的一个触点。为简单起见，代码只会在屏幕有一个触点时输出信息。
// 在touchstart 事件触发时，触点的位置信息会输出到 output 元素中。
// 在 touchmove 事件触发时，会取消默认行为以阻止滚动（移动触点通常会滚动页面），并输出变化的触点信息。
// 在 touchend 事件触发时，会输出触点最后的信息。注意，touchend 事件触发时 touches 集合中什么也没有，这是因为没有滚动的触点了。此时必须使用 changedTouches 集合

二手势事件

定义：手势事件会在两个手指触碰屏幕且相对距离或旋转角度变化时触发

事件：

gesturestart：一个手指已经放在屏幕上，再把另一个手指放到屏幕上时触发
gesturechange：任何一个手指在屏幕上的位置发生变化时触发
gestureend：其中一个手指离开屏幕时触发

属性：

含所有标准的鼠标事件属性：bubbles、 cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、 ctrlKey 和 metaKey
event 对象属性： rotation 和 scale
- rotation 属性表示手指变化旋转的度数，负值表示逆时针旋转，正值表示顺时针旋转（从 0 开始）
- scale 属性表示两指之间距离变化（对捏）的程度。开始时为 1，然后随着距离增大或缩小相应地增大或缩小

// 可以像下面这样使用手势事件的属性：
function handleGestureEvent(event) { let 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; case "gesturechange": output.innerHTML += `Gesture changed: ` + `rotation=${event.rotation},` + `scale=${event.scale}`; break; }
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);

三两者关系

当一个手指放在屏幕上时，会触发 touchstart 事件。
当另一个手指放到屏幕上时，gesturestart 事件会首先触发，然后紧接着触发这个手指的 touchstart 事件。
如果两个手指或其中一个手指移动，则会触发 gesturechange 事件。
只要其中一个手指离开屏幕，就会触发 gestureend 事件，紧接着触发该手指的 touchend 事件

事件之触摸及手势事件相关推荐

JavaScript触摸与手势事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: 1.touchstart: // 手指放到屏幕上的时候触发 2.touchmove: // 手指在屏幕上移 ...
Android开发笔记（四十五）手势事件
手势事件的流程基本手势事件基本的手势事件主要有如下三个方法: dispatchTouchEvent : 判断该事件是否需要下发.返回true表示需要下发给下级视图,返回false表示不需要下发(交 ...
Compose 手势事件:防止重复点击,双击,长按,全局触摸隐藏键盘
前言 JetPack Compose (后续简称compose) release版已经出来了三四个月了,虽然没正式版之前也学过几次,但一直没有机会用,在加上api的变更,导致之前学的都忘完了,现在终于 ...
JS—触摸事件、手势事件
JS-触摸事件.手势事件 dbclick 触屏设备不支持双击事件.双击浏览器窗口,会放大画面. 可以通过在head标签内加上这么一行: <meta name="viewport&quo ...
iOS UITouch触摸与UIGesture手势.01.事件、触摸（touch）事件
一.iOS事件: 1.事件:事件就是当你在手机上点击手机屏幕.滑动手机翻面.摇动手机的时候,手机做出一些反应,对应的在应用程序里实现了某些代码的某些功能,完成这个过程就是一个事件. 2.iOS事件类型 ...
iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控
-- iOS事件全面解析概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计.今天我们就针对iOS的触摸事 ...
android touch事件坐标原点,Android onTouch事件与手势操作
触摸,手势操作已经很好的融入了我们的生活.那么Android开发中触摸事件要如何捕捉?如何处理?如何识别手势?事件的传递机制又是怎么样的?下面我们将通过一个小例子来进行这方面的学习. 先看效果图如上 ...
IOS 定义手势监听器详解，利用 UIGestureRecognizer 进行捏合、旋转、平移、点击、长按手势事件响应
IOS中我们可以通过UITouch进行触摸事件监听,但是UITouch实现捏合.旋转.长按等手势事件监听非常麻烦.IOS中提供 UIGestureRecognizer 的子类帮我们简洁等实现捏合.旋转 ...
ios 滑动手势事件与cell touchevent事件_深入浅出~手势操作原理分析
序言在移动端开发中,手势操作非常常见,本篇文章主要讲解常见的 9 种手势操作原理,期间会穿插一些数学知识,将数学运用到实际问题中,数学部分可能会比较枯燥,但希望大家坚持读完,相信会收益良多. 点按: ...

事件之触摸及手势事件

事件之触摸及手势事件相关推荐

最新文章

热门文章