TouchEvent - Web API 接口参考 编辑

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

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

构造函数

TouchEvent()

创建一个TouchEvent对象。

属性列表

TouchEvent的属性继承了 UIEvent 和 Event。

TouchEvent.altKey 只读

布尔值，指明触摸事件触发时，键盘 alt 键是否被按下。

TouchEvent.changedTouches 只读

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

TouchEvent.ctrlKey 只读

布尔值，指明触摸事件触发时，键盘 ctrl 键是否被按下。

TouchEvent.metaKey 只读

布尔值，指明触摸事件触发时，键盘 meta 键 （Wikipedia - meta Key）是否被按下。

TouchEvent.shiftKey 只读

布尔值，指明触摸事件触发时，键盘 shift 键是否被按下。

TouchEvent.targetTouches 只读

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

TouchEvent.touches 只读

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

触摸事件的类型

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

注意: 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 event.preventDefault() 来阻止鼠标事件被触发。

touchstart

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

touchend

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

事件的目标 element 与触发 touchstart 事件的目标 element 相同，即使 touchend 事件触发时，触点已经移出了该 element 。

已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 TouchList 中找到。

touchmove

当用户在触摸平面上移动触点时触发。事件的目标 element 和触发 touchstart 事件的目标 element 相同，即使当 touchmove 事件触发时，触点已经移出了该 element 。

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

注意: 不同浏览器上 touchmove 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率。

touchcancel

当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：

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

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

很值得注意的是，在很多情况下，触摸事件和鼠标事件会一起触发（以使非触摸专用的代码仍然可以与用户交互）。如果你要使用触摸事件，你可以使用 preventDefault() 来取消鼠标事件。

但 Chrome 是例外，从版本56（桌面版、安卓版和安卓 webview）开始，Chrome 中 touchstart and touchmove 的默认值就是 true，没有必要调用 preventDefault()。如果要重写这个行为，简单地将 passive 设置成 false 就行。这样设置可以阻止监听器在用户滚动时停止页面渲染。Google Developer 有一个简单的演示。

全局事件处理

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

GlobalEventHandlers.ontouchstart

使用一个 global event handler 处理touchstart 事件。

GlobalEventHandlers.ontouchend

使用一个 global event handler 处理 touchend 事件。

GlobalEventHandlers.ontouchmove

使用一个 global event handler 处理 touchmove 事件。

GlobalEventHandlers.ontouchcancel

使用一个 global event handler 处理 touchcancel 事件。

实例

请看 example on the main Touch events article.

规范

规范	状态	注释
Touch Events – Level 2 TouchEvent	Draft	Added ontouchstart, ontouchend, ontouchmove, ontouchend global attribute handlers
Touch Events TouchEvent	Recommendation	Initial definition.

浏览器兼容性

BCD tables only load in the browser

相关链接

• Touch Events Overview
• GestureEvent
• MSGestureEvent