Mobile Web Development, CLICK,TOUCH,TAP event analysis

One, click and tap Comparison

Both will be triggered when clicked, but on the mobile Web side, click will have 200~300 MS, so tap instead of click.

Ii. About tap-through processing

When using a tap from the Zepto framework to move a click event in the device browser to circumvent the Click event's delayed response, there is a possibility of a point-in-click event that triggers a click that is not the current layer.

processing mode:

(1),

There is a library called Fastclick on GitHub that can also circumvent the latency response of the Click event on a mobile device, Https://github.com/ftlabs/fastclick
Bring it into the page with the script tag (the library supports AMD, so you can also introduce it in accordance with the AMD specification, with a module loader such as Require.js), and initialize it on the body when the DOM is ready, such as:

Then bind the Click event to an element that requires "no lag click" (Note that the tap event is no longer bound to zepto).
Of course, you can also initialize it on the body and initialize it on a DOM, so that only the DOM and its children can enjoy "no lag" clicks

In practice, it is found that when the element is bound Fastclick, the click Response is a little faster than tap. haha

(2), bind the Touchend event for the element, and add the E inside. preventdefault ();

$demo.on( ‘touchend‘ , function (e){ //
改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发      $demo.hide()      e.preventDefault(); //
阻止“默认行为” })




Third, touch event touch is for touching events on touch-screen phones.most touch-screen mobile WebKit cores today offer Touch Event Monitoring allows the developer to get some information when the user touches the screen.

touchstart,touchmove,touchend,touchcancel these four events

touchstart,touchmove,touchend event can be likened to mousedown , MouseOver
, mouseup trigger.

Touchstart: When the finger touches the screen it triggers;

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

Touchend: Triggers when the finger leaves the screen;

touchcancel Many people do not know when it will be triggered and ignore it, in fact, when your finger has not left the screen, there is a system-level operation will trigger touchcancel, such as alert and confirm bullets, or the function pop-up windows of an Android system.

For example:

The sequence of triggering for these 4 events is:

touchstart-> touchmove
-...-> touchmove ->touchend

But listening to the single event above is not enough to satisfy us to do some gestures such as double-tap, long-press, left-right swipe, zoom and so on . These events need to be monitored together to encapsulate such gestures.

In fact, many of the frameworks on the market for mobile browser encapsulated these gestures, such as Jqmobile, Zepto, Jqtouch, but the tragedy occurred, for some Android system (I myself tested on Android 4.0.x), The Touchmove and Touchend events cannot be very well triggered, as illustrated by the example below:

touchmove
, and the final  touchstart
Almost, while

for the time being I only found this bug in Android 4.0, which is said to be iOS The 3.x version will also be available.

Obviously Jqmobile, Zepto and so on are not aware of this bug on the monitoring implementation of the serious impact, so in the direct use of these framework event, there will be more or less compatibility issues!

Mobile Web Development, CLICK,TOUCH,TAP event analysis