Mobile touch-related events, tap, swipe

I. Definition and classification of events

1. Click event

Click event, similar to PC-side click, but in the mobile side, the trigger of continuous click has a delay of 200ms ~ 300ms

2. Touch Class Events

Touch events, there are Touchstart touchmove touchend touchcancel four kinds of points

Touchstart: Finger touch to screen will trigger

Touchmove: When the finger moves on the screen, it triggers

Touchend: Triggers when the finger leaves the screen

Touchcancel: Triggers that can be triggered by the system, such as when a finger touches the screen, when a sudden alert is made, or if the other interrupts the touch behavior in the system, the event can be triggered

3. Tap Class Events

Touch event, I still do not know the difference between it and touch, generally used in place of the Click event, there are tap Longtap Singletap Doubletap four kinds of points

Tap: Touching the screen with your finger will trigger

Longtap: Finger long press the screen will trigger

Singletap: Finger touch screen will trigger

Doubletap: Finger double-tap screen will trigger

4. Swipe class events

Sliding events, with swipe swipeleft swiperight swipeup Swipedown Five kinds of points

Swipe: Triggers when the finger slides on the screen

Swipeleft: Triggers when your finger slides to the left on the screen

Swiperight: Triggers when the finger slides to the right on the screen

Swipeup: Triggers when fingers swipe up on the screen

Swipedown: Triggers when the finger slides down on the screen

Click the order in which the event is triggered, and you can see the click event after Touchend

Fast point two, for the order of related events, you can see the click event triggered only once for the reason of the delay

Long press, the order in which the related events are triggered

Swipe right to trigger the order of related events

The Touchcancel event is triggered when the browser's own copy text function is inadvertently triggered by a long press

　2) View the triggered event object

Simply modify, set the third parameter in event listener to true to output the complete event object

Addevent (one, ' tap click Touchstart touchmove touchend touchcancel swipe swipeleft swiperight swipeup swipedown longtap si Ngletap Doubletap ', true);

Here are some of the three properties changedtouches, Targettouches, touches, third-party plug-in encapsulation simulates other events, often using these properties

Changedtouches: Holds all the finger information that raised the event

Targettouches: Saves finger information for the current touch screen

Touches: Saves finger information for all current touch screens

2. Third-party plug-in monitoring

1) using jquery

To see the difference between the three attributes, simply listen to only one event

<script src= "Jquery.js" ></script>

$ ('. One,. #test '). On (' Touchstart ', function (EV) {    ev.stoppropagation ();     Console.log (EV);});

Touch the screen in order five times to find that there are no three attributes in the event object

2) Switch to Zepto.js normal

<script src= "Zepto.js" ></script>

Look at the touch of the fifth time

See the second touch

Look at the touch of the fourth time

Can be seen

Touches records information about all touch objects on the screen.

Targettouches records information about all touch objects on the current DOM node

Changedtouches records the information that triggered the event, with a general length of 1

The corresponding array object is internally a series of coordinate properties that can be used to simulate other events such as gesture gesture events, etc.

Iii. Custom Gesture Event gesture

Gesture events are only conceptual, there is no browser-native support, according to the concept can be divided into Gesturestart gesturechange gestureend three kinds of events

Gesturestart: Triggers when two or more fingers are placed on the screen

Gesturechange: Triggers when there are two or more fingers on the screen and there are fingers moving

Gestureend: Triggers when the penultimate finger is lifted, ends gesture

By definition, when two fingers are placed on the screen, the following sequence of events is triggered:

1, the first finger down, trigger Touchstart

2, the second finger down, trigger Gesturestart

3, trigger the second finger of the Touchstart

4, immediately trigger Gesturechange

5, finger movement, continuous trigger Gesturechange

6, the second finger lift, trigger gestureend, will no longer trigger Gesturechange

7, trigger the second finger of the touchend

8, Trigger Touchstart (Dogan finger on the screen, lift a root, will refresh the global touch, re-trigger the first finger of the Touchstart)

9, lift the first finger, trigger touchend

Content reference: https://www.cnblogs.com/imwtr/p/5882166.html

Mobile touch-related events, tap, swipe