TouchEvent
TouchEvent
接口表示一个 UIEvent
,当与触摸敏感表面的接触状态发生变化时会发送此事件。例如,此表面可以是触摸屏或触控板。该事件可以描述一个或多个与屏幕的接触点,并包括支持检测移动、添加和删除接触点等功能。
触摸由 Touch
对象表示;每个触摸都由位置、大小和形状、压力量以及目标元素描述。触摸列表由 TouchList
对象表示。
构造函数
TouchEvent()
-
创建一个
TouchEvent
对象。
实例属性
TouchEvent.altKey
只读-
一个布尔值,指示触发触摸事件时 Alt 键是否按下。
TouchEvent.changedTouches
只读-
一个
TouchList
,包含所有Touch
对象,这些对象表示在之前的触摸事件和当前事件之间状态发生变化的各个接触点。 TouchEvent.ctrlKey
只读-
一个布尔值,指示触发触摸事件时 Ctrl 键是否按下。
TouchEvent.metaKey
只读-
一个布尔值,指示触发触摸事件时 Meta 键是否按下。
TouchEvent.shiftKey
只读-
一个布尔值,指示触发触摸事件时 Shift 键是否按下。
TouchEvent.targetTouches
只读TouchEvent.touches
只读TouchEvent.rotation
非标准 只读-
自事件开始以来的旋转变化(以度为单位)。正值表示顺时针旋转;负值表示逆时针旋转。初始值:
0.0
。 TouchEvent.scale
非标准 只读-
自事件开始以来两指之间的距离。表示为事件开始时两指之间初始距离的浮点倍数。小于 1.0 的值表示向内捏合(缩小)。大于 1.0 的值表示向外张开(放大)。初始值:
1.0
。
触摸事件类型
可以触发多种类型的事件来指示已发生与触摸相关的更改。您可以通过查看事件的 TouchEvent.type
属性来确定发生了哪些更改。
touchstart
-
当用户将触摸点放在触摸表面上时发送。事件的目标将是发生触摸的
元素
。 touchend
-
当用户从表面上移除触摸点时发送;也就是说,当他们从表面上抬起手指或触笔时。如果触摸点移出表面的边缘,也会发送此事件;例如,如果用户的指尖从屏幕边缘滑开。
事件的目标与接收与触摸点对应的
touchstart
事件的相同元素
,即使触摸点已移到该元素之外。从表面上移除的触摸点(或点)可以在
changedTouches
属性指定的TouchList
中找到。 touchmove
-
当用户沿表面移动触摸点时发送。事件的目标与接收与触摸点对应的
touchstart
事件的相同元素
,即使触摸点已移到该元素之外。如果触摸点的半径、旋转角度或力属性的值发生变化,也会发送此事件。
注意:发送
touchmove
事件的速率是特定于浏览器的,并且也可能因用户的硬件功能而异。您不能依赖于这些事件的特定粒度。 touchcancel
-
当触摸点以某种方式中断时发送。发生这种情况可能有几个可能的原因(确切的原因因设备而异,以及浏览器而异)
与 addEventListener() 和 preventDefault() 一起使用
需要注意的是,在许多情况下,都会发送触摸和鼠标事件(以便让非触摸特定的代码仍然可以与用户交互)。如果您使用触摸事件,则应调用 preventDefault()
以防止也发送鼠标事件。
Chrome 从 56 版开始(桌面版、Chrome for Android 和 Android webview)是一个例外,其中 touchstart
和 touchmove
的 passive
选项的默认值为 true
,并且对 preventDefault()
的调用将无效。要覆盖此行为,您需要将 passive
选项设置为 false
,之后调用 preventDefault()
将按指定方式工作。将侦听器默认视为 passive
的更改可防止侦听器在用户滚动时阻止页面呈现。在 Chrome 开发者 网站上提供了一个演示。
示例
请参阅 主要触摸事件文章中的示例。
规范
规范 |
---|
触摸事件 # touchevent-interface |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。