any-touch [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![size-image]][size-url] [](https://codecov.io/gh/any86/any-touch) [](https://circleci.com/gh/any86/any-touch)

April 19, 2022 · View on GitHub

gestures

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>

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	Press release (off screen)
tap	tap	Click, No problem with 300ms delay
swipe	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