TouchEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
touchend
touchmove
touchcancel
与 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
事件。
实例
规范
Specification |
---|
Touch Events # touchevent-interface |
浏览器兼容性
BCD tables only load in the browser