any-touch 
- Support PC/Mobile/WeChat applet.
- 6 gesture recognizers are loaded by default, can also be loaded on demand, core 1kb, full 5kb.
- No dependencies, not limited to Vue / React / Angular etc...
Language
中文 | English
Demo
QR Code
Install
npm i -S any-touchCDN
<script src="https://unpkg.com/any-touch/dist/any-touch.umd.min.js"></script>
<script>
console.log(AnyTouch.version); // 2.x.x
</script>Directory
Get Started
import AnyTouch from 'any-touch';
// monitored element
const el = document.getElementById('box');
// Start monitoring gesture changes on el
const at = new AnyTouch(el);
// The pan event fires when dragging
at.on('pan', (e) => {
// e contains information such as displacement/velocity/direction
console.log(e);
});The pan here is called gesture event. e is the event object, which contains data such as "position/speed/zoom/angle",
👋 Gesture
Each state of the gesture corresponds to an event.
| Gesture | Name | Describe |
|---|---|---|
| pan | pan | Triggered continuously while dragging |
| panstart | drag to start | |
| panmove | dragging | |
| panstart | Drag to stop (off screen) | |
| panup / pandown / panright / panleft | Drag events in different directions | |
| press | press | Press |
| press | Press release (off screen) | |
| tap | tap | Click, No problem with 300ms delay |
| swipe | swipe | Swipe |
| swipeup / swipedown / swiperight / swipeleft | Swipe in different directions | |
| pinch | pinch | Zoom |
| pinchstart | Zoom start | |
| pinchmove | Zooming | |
| pinchend | Zoom ends (off screen) | |
| pinchin | Zoom in | |
| pinchout | Zoom out | |
| rotate | rotate | Rotating, include rotatestart and rotatemove and rotateend |
| rotatestart | Start of rotation | |
| rotatemove | Rotating | |
| rotateend | End of rotation (off screen) |
Combining events
You can listen to multiple events through the array, such as listening to panleft and panright at the same time, so that you can listen to "x-axis dragging".
at.on(['panleft', 'panright'], () => {
console.log('Drag on the x-axis');
});🍭 Event
When the event is triggered, data such as "position/speed/zoom/angle" can be obtained.
at.on('pan', (event) => {
// event contains data such as speed/direction
});event
| name | type | describe |
|---|---|---|
| name | String |
Gesture recognizer name, such as: pan/tap/swipe, etc. |
| type | String |
Event name, such as tap or panstart, etc., is larger than the name field, such as: when the type is panstart or panmove, and the name returns pan |
| phase | String |
Current touch state: start / move / end / cancel Corresponding: first touch / move on the screen / leave the screen / abnormally leave the "can anyTouch" element |
| x | Number |
Current contact center x coordinate |
| y | Number |
Current contact center y coordinate |
| deltaX | Number |
The x-axis offset distance of the current contact and the previous contact |
| deltaY | Number |
The y-axis offset distance of the current contact and the previous contact |
| displacementX | Number |
The x displacement of the current contact and the starting contact (vector) |
| displacementY | Number |
The y displacement of the current contact and the starting contact (vector) |
| distanceX | Number |
absolute value of displacementX |
| distanceY | Number |
absolute value of displacementY |
| distance | Number |
The distance between the current contact and the starting contact (scalar) |
| deltaTime | Number |
The difference between the current time and the initial touch time |
| velocityX | Number |
The moving speed of the contact on the X axis |
| velocityY | Number |
The moving speed of the contact on the Y axis |
| direction | Number |
The direction of the front contact and the current contact can be understood as the instantaneous direction |
| angle | Number |
When multi-touch, the rotation angle between the starting contact and the current contact |
| deltaAngle | Number |
When multi-touch, the rotation angle between the front contact and the current contact |
| scale | Number |
When multi-touch, the zoom ratio of the starting touch point and the current touch point |
| deltaScale | Number |
When multi-touch, the zoom ratio between the previous touch point and the current touch point |
| maxPointLength | Number |
The maximum number of contacts that have occurred in the current identification cycle |
| isStart | Boolean |
Whether the current recognition cycle starts, the rule is that it is a cycle from touchstart->touchend, even if there is a multi-touch, if a point leaves, the current round of recognition ends |
| isEnd | Boolean |
Whether the current recognition cycle is over |
| target | EventTarget |
The element to which the event is bound |
| targets | EventTarget[] |
For multiple touches, each target in touches will be stored |
| currentTarget | EventTarget |
The element that actually triggered the bound event |
| nativeEvent | TouchEvent |
native event object |
Typescript
If the event function is bound in the vue template, the type of the event object cannot be deduced, so we need to manually annotate it ourselves.
<div @tap="onTap"></div>// xxx.vue
import type { AnyTouchEvent } from 'any-touch';
function onTap(e: AnyTouchEvent) {
// It can be correctly deduced that there is an x attribute on e
console.log(e.x);
}