/any-touch

:wave: Touch gesture library, 1kb~5kb, compatible with PC / mobile

Primary LanguageTypeScriptMIT LicenseMIT

any-touch NPM Version NPM Downloads size-image codecov CircleCI

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>

Directory

⚑ Get Started

🌱 Vue & Directives

πŸ€ WeChat applet

πŸ“ Load on demand

🌈 Advanced

πŸ’‘ 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');
});

πŸš€ 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

πŸš€ 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);
}

πŸš€ back to directory