Many of the front-end events are common on the PC and browser side, but some events are only generated on the mobile side, such as touch-related events
This article deals with some of the common events on mobile, including native-supported click, Touch, tab, swipe events, and defined gesture gesture events (currently just a concept that needs to be encapsulated when used)
Use of the mobile Chrome browser, this article only to debug the browser, other browsers have not considered
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
Second, the trigger of the event
Page structure:
1 <styletype= "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,Ten . the{ One float: Left; A margin:10px; - width:100px; - Height:100px; the text-align:Center; - Line-height:100px; - font-size:32px; - } + . One{ - Background-color:#ccc; + } A . the{ at Background-color:#999; - } - </style> - - - <DivID= "Test"> in <Divclass= "One">One</Div> - <Divclass= "both">Both</Div> to </Div>
1. Native Script Listener
1) View the event trigger and order
1varTest = document.getElementById (' Test ');2 varone = Document.queryselector ('. One '));3 varboth = Document.queryselector ('.);4 5 functionaddevent (Elem, type, showall) {6Type = Type.split (' ');7 8Type.foreach (function(item) {9Elem.addeventlistener (Item,function(EV) {TenConsole.log (ShowAll?ev:ev.type); One }); A }); - } - theAddevent (one, ' tap click Touchstart touchmove touchend touchcancel swipe swipeleft swiperight swipeup swipedown longtap si Ngletap Doubletap ',false);
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
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
<src= "Jquery.js"></script>
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
<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
There are other events to be discovered ...
Gestureend
Touch, tab, swipe, and so on, common on the front end of the mobile terminal