Introduction to the

AlloyFinger is a small and lightweight mobile gesture library produced by Tencent front-end team AlloyTeam. The code of the whole gesture library is not more than 400 lines, but it supports the majority of gesture operations, which can meet the daily development needs. AlloyFinger Portal: AlloyFinger.

JavaScript mobile touch events

Mobile browser provides four touch events: Touchstart, TouchMove, TouchEnd and TouchCancel respectively trigger events when finger touch just touches the screen, trigger events when finger touch moves on the screen, Trigger events when finger touch moves away from the screen and when the system interrupts (press the Home button to return to the Home screen, etc.).

It should be noted that mobile browsers also support some pc-loaded events, such as the Click event. However, on the mobile end, the click event will be delayed by about 300ms.

Mobile terminal 300ms delay trigger click event

Why is the click event delayed on the mobile side? The reason for this is that Apple used double-clicking to zoom in on web pages in its early iPhone releases. When a user clicks the screen once, the browser does not immediately determine whether the user has clicked or double-clicked the screen. Instead, the browser waits 300ms to determine whether the user has clicked the screen again. If the user does not click the screen again within 300ms, the click event will be considered as a click event and the click event will be triggered.

Source code analysis

AlloyTeam has created several versions of the AlloyFinger gesture library that can be easily used in React framework, Vue framework and native JS. The implementation idea of the gesture library version in different scenarios is the same, so only the implementation idea of native JS is analyzed here.

How to use

The use of AlloyFinger is very simple, the source code exposed a global AlloyFinger constructor object, use as follows, the return value is an AlloyFinger instance object.

// Element is a DOM element that requires gesture manipulation. The value can be a DOM object or an element selector.
// Options is an object containing the required gesture manipulation functions.
var af = new AlloyFinger(element, options);

var af = new AlloyFinger(element, {
    tap: function() {
        //do something...}});Copy the code

With the AlloyFinger instance object, you can also use the gesture library by binding custom events

// Bind gesture events
af.on('tap'.function() {
    //do something...
});
// Unbind the gesture event
af.off('tap'.function() {
    //do something...
});
// Destroy the instance
af.destroy();
Copy the code

The overall architecture

AlloyFinger constructor

First, we define an AlloyFinger constructor, which does a lot of things, such as listener callbacks for events, initialization of variable values, and adding gestures to the subscription list as subscribers. In this part of the source code, will initialize a lot of finger contact horizontal coordinates and vertical coordinates of storage variables, at the beginning of the code will feel confused, so the author put this part of the variables combed out, easy to read the source code clearly.

This.x1: stores the X position of the first finger contact at the beginning of touch this.y1: stores the Y position of the first finger contact at the beginning of touch this.prev. X: stores the horizontal distance between the first finger contact and the second finger contact this.prev. Y: Stores the horizontal distance between the first finger contact and the second finger contact this.prev. Y: Stores the horizontal distance between the first finger contact and the second finger contact this. Store the vertical spacing between the first finger contact and the second finger contact this.x2: Store the x-coordinate position of the first finger contact when moving this.y2: Store the y-coordinate position of the first finger contact when moving this.sx2: Store the x-coordinate position of the first finger contact when moving. Sy2: The Y position of the second finger contact stored in the move operationCopy the code

The entire source code interpretation is posted on my Github site, with almost every line annotated. If you’re interested, click here: Portal.

The source code is streamlined and efficient, read more excellent source code or helpful to their own technology, may be finished after thinking about their own how to DIY a gesture library? If you want to DIY yourself how to do a gesture library, you must first understand the implementation ideas of each gesture operation, and then you can start to write code.

The specific implementation

  • Click the tap

The essence of tap is actually touchend, but the specific implementation must be limited. Currently, there is only one finger touch, and the deviation between the X and Y axes of the finger touch when touchStart and touchEnd should not be less than 30, so that the current operation can be judged as TAP operation.

var len = evt.touches.length;
if(len < 1) {
    if ((this.x2 && Math.abs(this.x1 - this.x2) <= 30) | | (this.y2 && Math.abs(this.y1 - this.y2) <= 30)) {
                    // I am a tap operator, do something...}}Copy the code
  • doubleTap

DoubleTap double click operation implementation idea is roughly like this, have to judge whether there are two touchStart operation in a period of time, and two touchStart are quickly completed, or it will be considered to be a long press operation, there is a point that the two contact position of the X axis Y axis deviation can not be less than 30.

// Store the timestamp of the finger pressed touch operation
this.now = null;
// Stores the timestamp of the last finger touch
this.last = null;
// Use to store the horizontal and vertical coordinates of the finger touch operation (if it is a multi-finger touch operation, then record the position of the first finger touch)
this.preTapPosition = { x: null.y: null };
// Whether the operation is double-click
this.isDoubleTap = false; . function start() {this.now = Date.now();
    if (this.preTapPosition.x ! = =null) {
        // If the interval between continuous finger touches is less than 250 ms, and the horizontal and vertical coordinates of the contact positions between continuous finger touches are less than 30 and less than 30, then the operation is considered as a double click operation
        this.isDoubleTap = (this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30);
    }
    this.preTapPosition.x = this.x1;
    this.preTapPosition.y = this.y1;
    this.last = this.now;
}
function end() {
    if (this.isDoubleTap) {
        // I'm a doubleTap operator, do something...}}Copy the code
  • swipe

Swipe swipe can be achieved by shifting the x and Y directions of the touchstart and touchEnd fingers to more than 30 and judging which direction to swipe.

// Determine the direction of swipe
_swipeDirection: function (x1, x2, y1, y2) {
    return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')}Copy the code

For more source code analysis of gesture manipulation, see my github source code analysis, Portal. AlloyFinger gesture library is also used in a small mobile end cutting picture tool, next time can also analyze a wave of cutting tool AlloyCrop source code, learn the principle and implementation of cutting pictures, usually in the development process, in fact, as long as the clear realization of ideas and principles, it can be convenient to achieve specific functions.