TouchEvent - 表示与触敏表面的接触状态改变时发送的事件
TouchEvent 接口表示一个 UIEvent，当与触敏表面的接触状态改变时发送该事件。例如，该表面可以是触摸屏或触控板。该事件可以描述与屏幕的一个或多个接触点，并且包括用于检测运动，接触点的添加和移除等的支持。
触摸由 Touch 对象表示；每次触摸都包括了位置，大小和形状，压力大小以及目标元素。触摸列表由 TouchList 对象表示。
构造函数
TouchEvent()
创建一个 TouchEvent 对象。
属性
该接口从其父接口 UIEvent 和 Event 继承了属性。
TouchEvent.altKey 只读
一个布尔值，指示触发触摸事件时 alt 键是否按下。
TouchEvent.changedTouches 只读
一个包含 Touch 对象的 TouchList，这些触摸对象表示在前一个触摸事件和当前触摸事件之间状态发生变化的各个接触点。
TouchEvent.ctrlKey 只读
一个布尔值，指示触发触摸事件时控制键是否按下。
TouchEvent.metaKey 只读
一个布尔值，指示触发触摸事件时是否按下了 meta 键。
TouchEvent.shiftKey 只读
一个布尔值，指示在触发触摸事件时是否按下 shift 键。
TouchEvent.targetTouches只读
一个包含 Touch 对象的 TouchList，这些对象当前与触摸表面接触并且都开始在同一事件的目标元素。
TouchEvent.touches 只读
一个包含 Touch 对象的 TouchList，这些对象表示当前所有与表面接触的点，而不管目标或状态。
TouchEvent.rotation 只读
自事件开始以来的旋转度数（以度为单位）。正值表示顺时针旋转；正值表示顺时针旋转。负值表示逆时针旋转。初始值：0.0。
TouchEvent.scale 只读
事件开始以来的两位数之间的距离。在事件开始时以数字之间的初始距离的浮点倍数表示。小于 1.0 的值表示向内捏（缩小）。大于 1.0 的值表示向外松开（放大）。初始值：1.0。
触摸事件类型
有几种类型的事件可以触发，以指示发生了与触摸相关的更改。。您可以通过查看事件的 TouchEvent.type 属性来确定发生了哪些事件。
touchstart
当用户在触摸表面上放置触摸点时发送。事件的目标将是发生触摸的 element。
touchend
当用户从表面移开触摸点时（即，当他们从表面抬起手指或手写笔时）发送。如果接触点移离表面边缘，也会发送此消息；例如，如果用户的手指滑离屏幕边缘。
该事件的目标与接收到与该触摸点相对应的 touchstart 事件的 element 相同，即使该触摸点已移出该元素之外。
从表面移除的一个或多个接触点可以在由 changedTouches 属性指定的 TouchList 中找到。
touchmove
当用户沿表面移动触摸点时发送。事件的目标是接收到触摸点对应的 touchstart 事件的相同 element，即使触摸点已经移动到该元素之外。
如果触摸点的半径，旋转角度或力属性的值发生更改，也会发送此事件。
注意：
touchmove事件的发送速率取决于浏览器，并且还可能根据用户硬件的能力而有所不同。您不得依赖这些事件的特定粒度。
touchcancel
当接触点以某种方式被破坏时发送。发生这种情况的可能原因有几种（确切的原因因设备而异，并且因浏览器而异）：
- 发生了某种事件，取消了触摸；如果在交互过程中弹出模式警告，则可能会发生这种情况。
- 接触点已离开文档窗口，并移至浏览器的 UI 区域，插件或其他外部内容。
- 用户在屏幕上放置的触摸点数超出了支持范围，在这种情况下，
TouchList中最早的Touch被取消。
与 addEventListener() 和 preventDefault() 一起使用
需要注意的是，在许多情况下，都会发送触摸和鼠标事件(以便让非特定于触摸的代码仍然能够与用户交互)。如果您使用触摸事件，您应该调用 preventDefault() 来阻止鼠标事件被发送。
例外情况是 Chrome，从版本 56（桌面，Chrome for android 和 android webview）开始，其中 touchstart 和 touchmove 的默认值为 true，不需要调用 preventDefault()。要覆盖此行为，只需将 passive 选项设置为 false，如下例所示。此更改可防止监听器在用户滚动时阻止页面呈现。实例可在 Google Developer 网站上找到。
GlobalEventHandlers
GlobalEventHandlers 混合将这些事件定义为全局事件，这些事件可在用户可以与之交互的 DOM 中的任何元素上使用。
GlobalEventHandlers.ontouchstart
touchstart 事件的全局事件处理程序。
GlobalEventHandlers.ontouchend
GlobalEventHandlers.ontouchmove
GlobalEventHandlers.ontouchcancel
touchcancel 事件的全局事件处理程序。
实例
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| Touch Events – Level 2 TouchEvent 的定义 |
草稿 | 添加了 ontouchstart ，ontouchend，ontouchmove，ontouchend 全局属性处理程序 |
| Touch Events TouchEvent 的定义 |
推荐 | 初始定义。 |
桌面浏览器兼容性
| 特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基础支持 | 22 | ≤18 | 52 18 — 241 | 不支持 | 支持 | 不支持 |
TouchEvent() 构造函数 | 482 | ≤793 | 未知 | 不支持 | 支持 | 不支持 |
altKey | 22 | ≤18 | 52 18 — 24 | 不支持 | 支持 | 不支持 |
changedTouches | 22 | ≤18 | 52 18 — 24 | 不支持 | 支持 | 不支持 |
ctrlKey | 22 | ≤18 | 52 18 — 24 | 不支持 | 支持 | 不支持 |
metaKey | 22 | ≤18 | 52 18 — 24 | 不支持 | 支持 | 不支持 |
shiftKey | 22 | ≤18 | 52 18 — 24 | 不支持 | 支持 | 不支持 |
targetTouches | 22 | ≤18 | 52 18 — 24 | 不支持 | 支持 | 不支持 |
touches | 22 | ≤18 | 52 18 — 24 | 不支持 | 支持 | 不支持 |
移动浏览器兼容性
| 特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|---|
| 基础支持 | 支持 | 支持 | 未知 | 6 | 未知 | 支持 | 支持 |
TouchEvent() 构造函数 | 482 | 482 | 未知 | 支持 | 未知 | 12 | 3.2 |
altKey | 支持 | 支持 | 未知 | 6 | 未知 | 支持 | 支持 |
changedTouches | 支持 | 支持 | 未知 | 6 | 未知 | 支持 | 支持 |
ctrlKey | 支持 | 支持 | 未知 | 6 | 未知 | 支持 | 支持 |
metaKey | 支持 | 支持 | 未知 | 6 | 未知 | 支持 | 支持 |
shiftKey | 支持 | 支持 | 未知 | 6 | 未知 | 支持 | 支持 |
targetTouches | 支持 | 支持 | 未知 | 6 | 未知 | 支持 | 支持 |
touches | 支持 | 支持 | 未知 | 6 | 未知 | 支持 | 支持 |
1. 由于网页兼容性问题，已在 bug 888304 中删除。
2. Chrome 仅支持以下 touchEventInit 属性：touches，targetTouches，changedTouches。
3. Edge 仅支持以下 touchEventInit 属性：touches，targetTouches，changedTouches。
4. Samsung Internet 仅支持以下 touchEventInit 属性：touches，targetTouches，changedTouches。