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

Simple

any-scroll

Install

npm i -S any-touch

CDN

<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

• 👋 Gesture

• 🍭 Event

• 🔹 Typescript

🌱 Vue & Directives

🍀 WeChat applet

📐 Load on demand

🌈 Advanced

• prevenDefault
• doubletap

:bulb: API

🍳 Q & A

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');
});

:rocket: back to directory

🍭 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

:rocket: back to directory

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);
}

:rocket: back to directory