Skip to content

Latest commit

 

History

History
321 lines (230 loc) · 8.92 KB

API.md

File metadata and controls

321 lines (230 loc) · 8.92 KB
Raw

💡 API

content

🔥initialize

on(listen)

off (cancel listener)

set(set)

use(load gesture)

catchEvent (injected event object)

⭐beforeEach(interceptor)

get(get gesture)

destroy(destroy)

[AnyTouch.identifier] (#AnyTouchidentifier)

[AnyTouch.status code](#AnyTouch status code)

AnyTouch([el], [options])

initialize any-touch

el

The target element, because there is no DOM element in the WeChat applet, can be initialized without el, and then receive the touch event through the catchEvent function.

// initialize
const el = doucument.getElementById('box');
const at = AnyTouch(el);

options

A configuration item is an object.

  • preventDefault The value is Boolean or Function, the return value of the function is of type Boolean, and the default value is a function:

    const preventDefault = (event) => {
    if (event.target && 'tagName' in event.target) {
        const { tagName } = event.target;
        return !/^(?:INPUT|TEXTAREA|BUTTON|SELECT)$/.test(tagName);
    }
    return false;
},

    By default only "prevent default event firing" for non-form elements.

  • domEvents Value is Object or false. If it is false, then the DOM events of gestures such as tap/pan will not be triggered. Note that there is no true.

    If it is Object, then you can configure whether the gesture defined on the element can be "cancelled" and "bubble", the detailed parameters are the same as [eventInit type](https://developer.mozilla.org/zh-CN/docs /Web/API/Event/Event), by default cancellable/bubbable, which is {bubbles:true,cancelable:true}

    const at = AnyTouch(el);
el.addEventListener('tap', onTap);

    Since the templates of frameworks such as Vue support native events, events can be bound directly in the template in vue:

    <template>
    <div @tap="onTap"></div>
</template>
<script>
import AnyTouch from 'any-touch';
export default {
    mounted() {
        const at = new AnyTouch(this.$el);
    },
};
</script>

🚀 return to directory

on(eventName, listener)

Event listener.

eventName

event name

at.on('tap', onTap);

You can listen to multiple events at the same time.

at.on(['tap', 'pan'], onTouch);

listener

Event trigger function.

const listener = event=>{
    // event is a gesture event object, which can get information such as position
}
at.on('pan',listener);

🍭event object (event)

🚀 return to directory

off(eventName, [listener])

Cancel the event listener.

eventName

event name

at.off('tap', onTap);

Cancels all monitoring of the specified event name

at.off('tap');

🍭event object (event)

🚀 return to directory

set(options)

Change settings.

// If the current element is the a element, prevent default events from firing, such as link jumps.
at.set({ preventDefault: event=>event.target.tagName ==='A' });

Gesture parameter description

Name Description
@any-touch/tap click
@any-touch/pan drag
@any-touch/swipe swipe
@any-touch/press press
@any-touch/pinch zoom
@any-touch/rotate rotate

🚀 return to directory

use(Recognizer, options)

Load the gesture recognizer, options is the parameter of the gesture recognizer.

import tap from '@any-touch/tap';
at.use(tap, { tapTime: 2, name: 'doubletap' });

🚀 return to directory

catchEvent(event)

It only needs to be used under the WeChat applet, because the WeChat applet does not have the concept of dom element, so it needs to manually receive the touch event object.

<view
  @touchstart="onTouchstart"
  @touchmove="onTouchmove"
  @touchend="onTouchend"></view>
const at = AnyTouch()
{
    onload(){
        at.on('press', ev=>{
            // press
        });
    },

    methods: {
      onTouchstart(ev){
        at.catchEvent(ev);
      },
      onTouchmove(ev){
        at.catchEvent(ev);
      },
      onTouchend(ev){
        at.catchEvent(ev);
      }
    }
}

🚀 return to directory

beforeEach(hook)

Interceptor, which can perform custom interception operations before each gesture is triggered.

hook is a function, signature: (context: PluginContext & { event: AnyTouchEvent }, next: () => void) => void

context: Object, containing plugin information and event object information.

next: The interception function, only when next() is executed will the event corresponding to the current recognizer be triggered.

The following implements the "double-click" gesture, the logic is as follows:

  1. Use the tap plugin to define the "double click" recognition function.
  2. Use "beforeEach" to control the "click tap" event to fire with a delay of 300ms.
  3. If there is a "double tap doubletap" event within 300ms, then prevent "single tap" from triggering.
  4. At this time, only "double tap doubletap" will be triggered.
import Core from '@any-touch/core';
import tap from '@any-touch/tap';
import { STATUS_POSSIBLE, STATUS_FAILED } from '@any-touch/shared';
const at = Core(el);
at.use(tap, { name: 'doubletap', tapTimes: 2 });
let timeID = null;
at.beforeEach((context, next) => {
    if ('tap' === context.name) {
        clearTimeout(timeID);
        timeID = setTimeout(() => {
            const { state } = at. get('doubletap');
            const ok = [STATE_POSSIBLE, STATE_FAILED].includes(state);
            if (ok) {
                next();
            }
        }, 300);
    } else {
        next();
    }
});

at.on('tap', onTap);
at.on('doubletap', onDoubleTap);

🚀 return to directory

get(name: string): Recognizer | void

Get the specified identifier by name.

const tap = at.get('tap');
if (void 0 !== tap) {
    tap.set({ disabled: true });
}

🚀 return to directory

destroy()

Destroy the instance.

at.destroy();

🚀 return to directory

AnyTouch. Recognizer

Gesture recognizer.

If the full version of any-touch is introduced, then 6 gesture recognizers can be obtained through AnyTouch:

import AnyTouch from 'any-touch`;
const {tap, pan, swipe, press, pinch, rotate} = AnyTouch;

Further, gesture recognizers have been made into separate packages, which can also be loaded on demand.

Name Description
@any-touch/tap click
@any-touch/pan drag
@any-touch/swipe swipe
@any-touch/press press
@any-touch/pinch zoom
@any-touch/rotate rotate

🚀 return to directory

AnyTouch. Status Code

Recognizer state, there are 6 states in total.

import AnyTouch from 'any-touch`;
const {STATUS_POSSIBLE, STATUS_RECOGNIZED} = AnyTouch;
Variable Describe
STATUS_POSSIBLE 表示当前还"未识别"
STATUS_START "Drag class" gestures (pan/pinch/rotate, etc.) means "first recognition."
STATUS_MOVE "Drag and drop" gesture means "moving after recognition"
STATUS_END The "drag-like" gesture means "when the contact leaves, the gesture ends"
STATUS_CANCELLED After the gesture is recognized, event interruption occurs, such as "incoming call", "browser minimization", etc.
STATUS_FAILED Indicates "recognition failure", such as when recognizing a tap, the contact does not leave the screen within 250ms, etc.
STATUS_RECOGNIZED Indicates "recognized", which is different from "drag-like" gestures, used in "instant" recognized gestures, such as tap/press/swipe.

Generally used in conjunction with beforeEach to control gesture triggering.

🚀 return to directory