移动端可视化－手势 #6

TomHuangCN · 2015-10-19T07:32:57Z

移动端可视化－手势

手势简介

有所说明
- 此处手势是广义手势，它包含了Touch（就是点点戳戳）
有所谈
- 手势的标准
- 通用手势
- 手势与数据可视化
有所不谈
- Force Touch
- 高级手势
- 3D手势

手势事件和事件属性（底层）

底层事件
- touchstart 触摸开始
- touchmove 触摸进行
- touchend 触摸结束
- touchcancle 触摸结束
底层属性

clientX of type long, readonly
The horizontal coordinate of point relative to the viewport in pixels, excluding any scroll offset

clientY of type long, readonly
The vertical coordinate of point relative to the viewport in pixels, excluding any scroll offset

identifier of type long, readonly
An identification number for each touch point. When a touch point becomes active, it must be assigned an identifier that is distinct from any other active touch point. While the touch point remains active, all events that refer to it must assign it the same identifier.

pageX of type long, readonly
The horizontal coordinate of point relative to the viewport in pixels, including any scroll offset

pageY of type long, readonly
The vertical coordinate of point relative to the viewport in pixels, including any scroll offset

screenX of type long, readonly
The horizontal coordinate of point relative to the screen in pixels

screenY of type long, readonly
The vertical coordinate of point relative to the screen in pixels

target of type EventTarget, readonly
The EventTarget on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element.

altKey of type boolean, readonly
true if the alt (Alternate) key modifier is activated; otherwise false

changedTouches of type TouchList, readonly
a list of Touches for every point of contact which contributed to the event.

For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.

ctrlKey of type boolean, readonly
true if the ctrl (Control) key modifier is activated; otherwise false

metaKey of type boolean, readonly
true if the meta (Meta) key modifier is activated; otherwise false. On some platforms this attribute may map to a differently-named key modifier.

shiftKey of type boolean, readonly
true if the shift (Shift) key modifier is activated; otherwise false

targetTouches of type TouchList, readonly
a list of Touches for every point of contact that is touching the surface and started on the element that is the target of the current event.

touches of type TouchList, readonly
a list of Touches for every point of contact currently touching the surface.

手势种类

利用基础的事件和事件属性的组合我们能模拟各种各样的手势

1、Pan事件：在指定的区域内，一个手指放下并移动事件，即触屏中的拖动事件。这个事件在屏触开发中比较常用，如：左拖动、右拖动等，如手要上使用QQ时向右滑动出现功能菜单的效果。该事件还可以分别对以下事件进行监听并处理：

Panstart：拖动开始、Panmove：拖动过程、Panend：拖动结束、Pancancel：拖动取消、Panleft：向左拖动、Panright：向右拖动、Panup：向上拖动、Pandown：向下拖动

2、Pinch事件：在指定的dom区域内，两个手指（默认为两个手指，多指触控需要单独设置）或多个手指相对（越来越近）移动或相向（越来越远）移动时事件。该事件事以分别对以下事件进行监听并处理：

Pinchstart：多点触控开始、Pinchmove：多点触控过程、Pinchend：多点触控结束、Pinchcancel：多点触控取消、Pinchin：多点触控时两手指距离越来越近、Pinchout：多点触控时两手指距离越来越远

3、Press事件：在指定的dom区域内触屏版本的点击事件，这个事件相当于PC端的Click事件，该不能包含任何的移动，最小按压时间为500毫秒，常用于我们在手机上用的“复制、粘贴”等功能。该事件分别对以下事件进行监听并处理：

Pressup：点击事件离开时触发

4、Rotate事件：在指定的dom区域内，当两个手指或更多手指成圆型旋转时触发（就像两个手指拧螺丝一样）。该事件分别对以下事件进行监听并处理：

Rotatestart：旋转开始、Rotatemove：旋转过程、Rotateend：旋转结束、Rotatecancel：旋转取消

5、Swipe事件：在指定的dom区域内，一个手指快速的在触屏上滑动。即我们平时用到最多的滑动事件。

Swipeleft：向左滑动、Swiperight：向右滑动、Swipeup：向上滑动、Swipedown：向下滑动

6、Tap事件：在指定的dom区域内，一个手指轻拍或点击时触发该事件(类似PC端的click)。该事件最大点击时间为250毫秒，如果超过250毫秒则按Press事件进行处理。