Mobile Web Development, CLICK,TOUCH,TAP event analysis

Source: Internet
Author: User

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 delayed response of the Click event on a mobile device,
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, in Google issue has been a lot of people put forward  

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.