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.

Singletap and Doubletap represent single clicks and double clicks, respectively.

Second, the point of tap processing

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

Processing method:

(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:

123	$(function(){    newFastClick(document.body);})

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 practical development, when the element is bound to Fastclick, the click Response is a little faster than tap. Ha ha

(2), binding the Touchend event for the element, and adding e.preventdefault () inside;

$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 offerTouch Event Monitoring allows the developer to get some information when the user touches the screen.

These include the following:the four events of Touchstart,touchmove,touchend,touchcancel

Touchstart,touchmove,touchend events can be likened to Mousedown,mouseover
,the trigger of the MouseUp.

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;

and touchcancel Many people do not know when it will be triggered and ignore it, in fact, when your finger has not left the screen, 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:

For example, when a finger drags a page down the screen, a  < is theoretically triggered Span class= "color: #000000; font-family:tahoma, ' Microsoft Yahei ', SimSun; padding:0px; border:0px; background:transparent; " >touchstart, many times   touchmove
, and the final  touchend, but on Android 4.0, Touchmove is only triggered once, triggering time and touchstart
Almost, and touchend is not directly triggered. This is a very serious bug, many people in Google issue have proposed  http://code.google.com/p/android/issues/detail?id=19827

Mobile Web Development, CLICK,TOUCH,TAP event analysis