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), Https://github.com/ftlabs/fastclick

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:

$ (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), bind the Touchend event for the element, and add the E inside. preventdefault ();

$demo. On ( ' touchend ' , function (e) { //
Changed the name of the event, tap is triggered on the body, and Touchend is the native event, which is captured on the DOM itself      $demo.hide ()      e.preventdefault (); //
Block default behavior })
Third, touch event touch is for touching events on touch-screen phones.most of today's touchscreen phones WebKit cores provide the ability to listen to touch events, allowing developers to get some information when a user touches the screen.

touchstart,touchmove,touchend,touchcancel These four events

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 window of the Android system.

For example:

The sequence of triggering for these 4 events is:

touchstart-> touchmove
...-> < Span class= "color: #000000; font-family:tahoma, ' Microsoft Yahei ', Simsun;background-color: #ffffff" >touchmove->< Span class= "color: #000000; font-family:tahoma, ' Microsoft Yahei ', Simsun;background-color: #ffffff" >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;background-color: #ffffff" >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

for the time being I only found that in Android 4.0 there would be this bug, supposedly iOS 3. The version of X 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