Mobile front-end common touch-related events such as touch, tap, and swipe.

Mobile front-end common touch-related events such as touch, tap, and swipe.

Many front-end events can be shared on PCs and browsers, but some events are only generated on mobile terminals, such as touch-related events.

This article lists some common events on the Mobile End, including click, touch, tap, and swipe events supported by the native, and gesture events (currently only a concept, encapsulation simulation is required)

The mobile Chrome browser is used. This article only debugs the browser.

 

I. Event definition and classification

1. click Event

The click event is similar to the click event on the PC end. However, on the Mobile End, the continuous click trigger is 200 ms ~ Latency of MS

 

2. touch events

Touch events, which can be touchstart touchmove touchend touchcancel.

Touchstart: triggered when you touch your finger on the screen.

Touchmove: triggered when the finger moves on the screen

Touchend: triggered when the finger leaves the screen

Touchcancel: a trigger that can be triggered by the system. For example, when you touch the screen with your finger, alert suddenly occurs, or other activities in the system interrupt touch can trigger this event.

 

3. tap events

I do not know the difference between a touch event and a touch event. It is generally used to replace a click event. There are four types of touch events: tap longTap singleTap doubleTap.

Tap: triggered when you touch the screen with your finger

LongTap: triggered when you press your finger on the screen.

SingleTap: triggered when you touch the screen

DoubleTap: double-click on the screen.

 

4. swipe events

Slide events, which can be swipe swipeLeft swipeRight swipeUp swipeDown.

Swipe: triggered when the finger slides on the screen.

SwipeLeft: triggered when the finger slides left on the screen

SwipeRight: triggered when the finger slides to the right of the screen

SwipeUp: triggered when the finger slides up on the screen.

SwipeDown: triggered when the finger slides down on the screen.

 

Ii. event triggering

Page Structure:

 1     <style type="text/css"> 2         #test { 3             overflow: hidden; 4             margin: 50px auto; 5             width: 300px; 6             height: 300px; 7             border: 1px solid #ccc; 8         } 9         .one,10         .two {11             float: left;12             margin: 10px;13             width: 100px;14             height: 100px;15             text-align: center;16             line-height: 100px;17             font-size: 32px;18         }19         .one {20             background-color: #ccc;21         }22         .two {23             background-color: #999;24         }25     </style>    26 27 28     <div id="test">29         <div class="one">one</div>30         <div class="two">two</div>31     </div>

1. Native script listening

　1) view the trigger and sequence of events

 1 var test = document.getElementById('test'); 2 var one = document.querySelector('.one'); 3 var two = document.querySelector('.two'); 4  5 function addEvent(elem, type, showAll) { 6     type = type.split(' '); 7  8     type.forEach(function(item) { 9          elem.addEventListener(item, function(ev) {10               console.log(showAll ? ev : ev.type);11          });12     });13 }14 15 addEvent(one, 'tap click touchstart touchmove touchend touchcancel swipe swipeLeft swipeRight swipeUp swipeDown longTap singleTap doubleTap', false);

Click Next to trigger the event. You can see that the click event is after touchend.

Click the trigger order of the related events. You can see that the click event is triggered only once due to the delay.

Long-pressed, which is the sequence in which related events are triggered.

Slide to the right to display the trigger sequence of related events.

The browser's own copy text function was accidentally triggered when a long press was made, and the touchcancel event was triggered.

 

　2) view the trigger event object

Simple modification: Set the third parameter in the event listener to true and output the complete event object.

addEvent(one, 'tap click touchstart touchmove touchend touchcancel swipe swipeLeft swipeRight swipeUp swipeDown longTap singleTap doubleTap', true);

Here we focus on the three attributes changedTouches, targetTouches, and touches. These attributes are often used when third-party plug-ins encapsulate and simulate other events.

ChangedTouches: stores all finger information that triggers the event.

TargetTouches: saves the finger information that touched the screen before.

Touches: stores all the finger information currently touching the screen.

 

2. Third-party plug-in listening

1) Use jquery

To view the differences between the three attributes, simply listen to only one event

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

$('.one, .two, #test').on('touchstart', function(ev) {    ev.stopPropagation();     console.log(ev);});

Touch the screen five times in sequence and find that there are no three properties in the event object

 

2) switch to zepto. js normally.

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

Watch touch for the fifth time

Watch the second touch

Watch touch for the fourth time

We can see that:

Touches records the information of all the touch objects on the screen.

TargetTouches records the information of all the touch objects on the current DOM node.

ChangedTouches records the information that triggers the event. The length is generally 1.

 

The corresponding array object contains a series of coordinate attributes, which can be used to simulate other events, such as gesture events.

 

3. Custom gesture event gesture

Gesture events are only conceptual events and are not yet supported by browsers. They can be divided into three types by concept: gesturestart gesturechange gestureend.

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

Gesturechange: triggered when two or more fingers are on the screen and some fingers are moving.

Gestureend: triggered when the last and second fingers are lifted, ends gesture

 

As defined, when two fingers are placed on the screen, the following sequence of events are triggered:

1. Put the first finger down and trigger touchstart

2. Put the second finger down and trigger gesturestart

3. Trigger the touchstart of the second finger

4. Trigger gesturechange immediately

5. Move your finger to continue triggering gesturechange

6. Trigger gestureend with the second finger. gesturechange will not be triggered in the future.

7. Trigger the touchend of the second finger

8. Trigger the touchstart (when multiple fingers are on the screen and one is lifted, the global touch is refreshed and the touchstart of the first finger is re-triggered)

9. Lift the first finger and trigger the touchend

 

There are other events to be discovered...

 

 

 

 

Gestureend