TouchEvent

TouchEvent 接口表示一个 UIEvent,当与触摸敏感表面的接触状态发生变化时会发送此事件。例如,此表面可以是触摸屏或触控板。该事件可以描述一个或多个与屏幕的接触点,并包括支持检测移动、添加和删除接触点等功能。

触摸由 Touch 对象表示;每个触摸都由位置、大小和形状、压力量以及目标元素描述。触摸列表由 TouchList 对象表示。

Event UIEvent TouchEvent

构造函数

TouchEvent()

创建一个 TouchEvent 对象。

实例属性

此接口继承自其父接口 UIEventEvent

TouchEvent.altKey 只读

一个布尔值,指示触发触摸事件时 Alt 键是否按下。

TouchEvent.changedTouches 只读

一个 TouchList,包含所有 Touch 对象,这些对象表示在之前的触摸事件和当前事件之间状态发生变化的各个接触点。

TouchEvent.ctrlKey 只读

一个布尔值,指示触发触摸事件时 Ctrl 键是否按下。

TouchEvent.metaKey 只读

一个布尔值,指示触发触摸事件时 Meta 键是否按下。

TouchEvent.shiftKey 只读

一个布尔值,指示触发触摸事件时 Shift 键是否按下。

TouchEvent.targetTouches 只读

一个 TouchList,包含所有 Touch 对象,这些对象既当前与触摸表面接触,在与事件目标相同的元素上开始。

TouchEvent.touches 只读

一个 TouchList,包含所有 Touch 对象,这些对象表示与表面的所有当前接触点,而不管目标或更改状态如何。

TouchEvent.rotation 非标准 只读

自事件开始以来的旋转变化(以度为单位)。正值表示顺时针旋转;负值表示逆时针旋转。初始值:0.0

TouchEvent.scale 非标准 只读

自事件开始以来两指之间的距离。表示为事件开始时两指之间初始距离的浮点倍数。小于 1.0 的值表示向内捏合(缩小)。大于 1.0 的值表示向外张开(放大)。初始值:1.0

触摸事件类型

可以触发多种类型的事件来指示已发生与触摸相关的更改。您可以通过查看事件的 TouchEvent.type 属性来确定发生了哪些更改。

touchstart

当用户将触摸点放在触摸表面上时发送。事件的目标将是发生触摸的 元素

touchend

当用户从表面上移除触摸点时发送;也就是说,当他们从表面上抬起手指或触笔时。如果触摸点移出表面的边缘,也会发送此事件;例如,如果用户的指尖从屏幕边缘滑开。

事件的目标与接收与触摸点对应的 touchstart 事件的相同 元素,即使触摸点已移到该元素之外。

从表面上移除的触摸点(或点)可以在 changedTouches 属性指定的 TouchList 中找到。

touchmove

当用户沿表面移动触摸点时发送。事件的目标与接收与触摸点对应的 touchstart 事件的相同 元素,即使触摸点已移到该元素之外。

如果触摸点的半径、旋转角度或力属性的值发生变化,也会发送此事件。

注意:发送 touchmove 事件的速率是特定于浏览器的,并且也可能因用户的硬件功能而异。您不能依赖于这些事件的特定粒度。

touchcancel

当触摸点以某种方式中断时发送。发生这种情况可能有几个可能的原因(确切的原因因设备而异,以及浏览器而异)

  • 某种事件导致触摸被取消;如果在交互期间弹出一个模态警报,则可能会发生这种情况。
  • 触摸点已离开文档窗口并移动到浏览器的 UI 区域、插件或其他外部内容中。
  • 用户在屏幕上放置了超过支持数量的触摸点,在这种情况下,TouchList 中最早的 Touch 会被取消。

与 addEventListener() 和 preventDefault() 一起使用

需要注意的是,在许多情况下,都会发送触摸和鼠标事件(以便让非触摸特定的代码仍然可以与用户交互)。如果您使用触摸事件,则应调用 preventDefault() 以防止也发送鼠标事件。

Chrome 从 56 版开始(桌面版、Chrome for Android 和 Android webview)是一个例外,其中 touchstarttouchmovepassive 选项的默认值为 true,并且对 preventDefault() 的调用将无效。要覆盖此行为,您需要将 passive 选项设置为 false,之后调用 preventDefault() 将按指定方式工作。将侦听器默认视为 passive 的更改可防止侦听器在用户滚动时阻止页面呈现。在 Chrome 开发者 网站上提供了一个演示。

示例

规范

规范
触摸事件
# touchevent-interface

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅