事件名称 | 描述 | 包含touches数组 |
touchstart |
当用户在触摸平面上放置了一个触点时触发。事件的目标 element 将是触点位置上的那个目标 element |
是 |
touchmove |
当用户在触摸平面上移动触点时触发。 事件的目标 哪怕当 |
是 |
touchend |
当一个触点被用户从触摸平面上移除(当用户将一个手指离开触摸平面)时触发。 当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。 已经被从触摸平面上移除的触点,可以在 |
是 |
touchenter |
当触点进入某个 element 时触发。此事件没有冒泡过程。 |
是 |
touchleave |
当触点离开某个 element 时触发。此事件没有冒泡过程。 |
是 |
touchcancel |
当触点由于某些原因被中断时触发。有几种可能的原因如下(具体的原因根据不同的设备和浏览器有所不同):
|
是 |
触摸对象属性
Touch.identifier |
返回一个可以唯一地识别和触摸平面接触的点的值. 这个值在这根手指(或触摸笔等)所引发的所有事件中保持一致, 直到它离开触摸平面. |
Touch.screenX |
触点相对于屏幕左边沿的的X坐标. 只读属性. |
Touch.screenY |
触点相对于屏幕上边沿的的Y坐标. 只读属性. |
Touch.clientX |
触点相对于可见视区左边沿的的X坐标. 不包括任何滚动偏移. 只读属性. |
Touch.clientY |
触点相对于可见视区上边沿的的Y坐标. 不包括任何滚动偏移. 只读属性. |
Touch.pageX |
触点相对于HTML文档左边沿的的X坐标. 当存在水平 滚动的 偏移时, 这个值包含了水平滚动的偏移 . 只读属性. |
Touch.pageY |
触点相对于HTML文档上边沿的的Y坐标. 当存在水平滚动的偏移时, 这个值包含了垂直滚动的偏移 . 只读属性. |
Touch.radiusX |
能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和 screenX 相同. 只读属性. |
|
手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性. |
|
能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和 screenY 相同. 只读属性. |
|
当这个触点最开始被跟踪时(在 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性. |
IE10+的触摸事件
事件名称 | 描述(在触摸设备上) |
---|---|
MSPointerDown | 触摸开始 |
MSPointerMove | 接触点移动 |
MSPointerUp | 触摸结束 |
MSPointerOver | 触摸点移动到元素内,相当于mouseover |
MSPointerOut | 触摸点离开元素,相当于mouseout |
MSPointerEvent属性
属性 | 描述 |
---|---|
hwTimestamp | 创建事件的时间(ms) |
isPrimary | 标识该指针是不是主指针 |
pointerId | 指针的唯一ID(类似于触摸事件的标识符) |
pointerType | 一个整数,标识了该事件来自鼠标、手写笔还是手指 |
pressure | 笔的压力,0-255,只有手写笔输入时才可用 |
rotation | 0-359的整数,光标的旋转度(如果支持的话) |
tiltX/tiltY | 手写笔的倾斜度,只有用手写笔输入时才支持 |
等价事件
鼠标 | 触摸 | 键盘 |
mousedown | touchstart | keydown |
mousemove | touchmove | keydown |
mouseup | touchend | keyup |
mouseover | focus |
很显然,触摸动作序列:touchstart-touchmove-touchend和鼠标序 列:mousedown-mousemove-mouseup以及键盘序列:keydown-keypress-keyup很相似,这并不是巧合,因为这 三种交互模式都可以描述为start-move-stop。
话说回来,click要经过touchstart-touchmove-touchend流程,300ms延迟,所以需要tap事件,tap就是在同一个点轻触时间很短。
封装好的tap和longtap事件
以上这篇HTML5触摸事件演化tap事件介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
原文地址:http://www.cnblogs.com/hutuzhu/archive/2016/03/25/5315638.html