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.

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

: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