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 和这个 touchend 事件对应的 touchstart 事件的目标 element 相同,哪怕 touchend 事件触发时,触点已经移出了该 element

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

touchmove

当用户在触摸平面上移动触点时触发。事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同,哪怕当 touchmove 事件触发时,触点已经移出了该 element

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

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

touchcancel

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

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

全局事件处理

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

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.

规范

Specification Status Comment
Touch Events – Level 2
TouchEvent
Editor's Draft Added ontouchstartontouchend,ontouchmoveontouchend global attribute handlers
Touch Events
TouchEvent
Recommendation Initial definition.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 22.0 18.0 (18.0) 未实现 未实现 未实现
Feature Android Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) 6.0 (6.0) (Yes) 11 (Yes) (Yes)
TouchEvent() (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

相关链接

文档标签和贡献者

 此页面的贡献者: zhaosource, kangmingxuan, AshfaqHossain, ziyunfei, hyspace
 最后编辑者: zhaosource,