TouchEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
TouchEvent
接口表示一种 UIEvent
,当具有触摸表面的接触状态改变时会发送该事件。例如,此表面可以是触摸屏或触控板。该事件可以描述与屏幕的一个或多个接触点,并且包括对检测移动、接触点的增加和移除等的支持。
触点由 Touch
对象表示;每个触点都由其位置、大小、形状、压力大小和目标元素描述。触点列表则由 TouchList
对象表示。
构造函数
TouchEvent()
-
创建一个
TouchEvent
对象。
实例属性
此接口继承了父接口 UIEvent
和 Event
的属性。
TouchEvent.altKey
只读-
布尔值,指明触摸事件触发时,键盘 alt 键是否被按下。
TouchEvent.changedTouches
只读-
一个
TouchList
对象,包含了代表所有从上一次触摸事件到此次事件过程中,状态发生了改变的触点的Touch
对象。 TouchEvent.ctrlKey
只读-
布尔值,指明触摸事件触发时,键盘 ctrl 键是否被按下。
TouchEvent.metaKey
只读-
布尔值,指明触摸事件触发时,键盘 meta 键是否被按下。
TouchEvent.shiftKey
只读-
布尔值,指明触摸事件触发时,键盘 shift 键是否被按下。
TouchEvent.targetTouches
只读-
一个
TouchList
对象,包含了代表没有离开触摸平面,并且触摸起始于当前事件的目标元素的触点的Touch
对象。 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(桌面版、安卓版和安卓 webview)开始,Chrome 中 touchstart
和 touchmove
的 passive
选项的默认值就是 true
,调用 preventDefault()
无效。如果要重写这个行为,简单地将 passive
选项设置成 false
就行,之后调用 preventDefault()
将按指定方式工作。将监听器默认视为 passive
的变更可以阻止监听器在用户滚动时阻塞页面渲染。Google Developer 站点有一个简单的演示。
示例
参见触摸事件文章的示例。
规范
Specification |
---|
Touch Events # touchevent-interface |
浏览器兼容性
BCD tables only load in the browser