TouchEvent

TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等。

每 个 Touch 对象代表一个触点; 每个触点都由其位置,大小,形状,压力大小,和目标 element 描述。

TouchEvent(typeArg, touchEventInit)

创建一个TouchEvent对象。

参数

typeArg:一个DOMString,代表事件名

touchEventInit:TouchEventInit字典

touchEventInit包括:

属性 类型 是否必填 说明
touches Array 默认为[],包含了所有当前接触触摸平面的触点的 Touch 对象,无论它们的起始于哪个 element 上,也无论它们状态是否发生了变化
targetTouches Array 默认为[], 是包含了如下触点的 Touch 对象:触摸起始于当前事件的目标 element 上,并且仍然没有离开触摸平面的触点
changedTouches Array 默认为[], 包含了代表所有从上一次触摸事件到此次事件过程中,状态发生了改变的触点的 Touch 对象

属性

TouchEvent.touches

一个数组对象,包含了所有当前接触触摸平面的触点的 Touch 对象,无论它们的起始于哪个 element 上,也无论它们状态是否发生了变化。

TouchEvent.changedTouches

一个数组对象,包含了代表所有从上一次触摸事件到此次事件过程中,状态发生了改变的触点的 Touch 对象。

TouchEvent.targetTouches

一个数组对象,是包含了如下触点的 Touch 对象:触摸起始于当前事件的目标 element 上,并且仍然没有离开触摸平面的触点。

触摸事件的类型

为了区别触摸相关的状态改变,存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型

touchstart

当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element

touchend

当一个触点被用户从触摸平面上移除(当用户将一个手指离开触摸平面)时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。

事件的目标 element 和这个 touchend 事件对应的 touchstart 事件的目标 element 相同,哪怕 touchend 事件触发时,触点已经移出了该 element 。

touchmove

当用户在触摸平面上移动触点时触发。事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同,哪怕当 touchmove 事件触发时,触点已经移出了该 element 。

当触点的半径、旋转角度以及压力大小发生变化时,也将触发此事件。

touchcancel

当触点由于某些原因被中断时触发。有几种可能的原因如下:

由于某个事件取消了触摸:例如触摸过程被一个模态的弹出框打断。 触点离开了文档窗口,而进入了浏览器的界面元素、插件或者其他外部内容区域。 当用户产生的触点个数超过了设备支持的个数,从而导致 TouchList 中最早的 Touch 对象被取消。

使用示例

function handleStart(evt) {
  console.log("touchstart.");
}
function handleEnd(evt) {
  console.log("touchend.");
}
function handleCancel(evt) {
  console.log("touchcancel.");
}
function handleMove(evt) {
  console.log("touchmove.");
}
window.addEventListener("touchstart", handleStart, false);
window.addEventListener("touchend", handleEnd, false);
window.addEventListener("touchcancel", handleCancel, false);
window.addEventListener("touchmove", handleMove, false);
© 2020 OPPO. All rights reserved.

results matching ""

    No results matching ""