Fastclick and Zepto Tap event differences about the 300ms latency of the Click event on the phone

Previously translated a Quick Click article about Fastclick Http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick can solve the 300ms latency of click events on the phone In addition, we also know that Zepto's touch module helps us to achieve many of the events on the phone, such as tap, and the tap event is also to solve the latency problem in click. So what's the difference between them?

First look at the Zepto Touch module implementation:

1 $ (document)2. On (' Touchstart ... ',function(e) {3              ...4              ...5now =Date.now ()6Delta = now-(Touch.last | |Now )7              if(Delta > 0 && delta <=) Touch.isdoubletap =true8Touch.last = Now9     })Ten. On (' Touchmove ... ',function(e) { One     }) A. On (' Touchend ... ',function(e) { -            ... -            if(DeltaX < && DeltaY < 30) { the                   varEvent = $. Event (' Tap ') -                  - Touch.el.trigger (Event) -            } +})

The touch module binds events Touchstart,touchmove and touchend to document, and then realizes the custom tap,swipe by calculating the time difference triggered by the touch event, the location difference.

So why does the tap event "penetrate"?

For example, the following code:

. Q{width:200px;height:200px;background-color:red;position:absolute;top:0;; left:0}. B{width:300px;height:300px;background-color:green;position:absolute;top:0;; left:0}        </style> <div class= "B" ></div> <div class= "q" ></div> <script >            $('. Q '). On (' Tap ',function(e) {$ ( This). Hide ();            }); $('. B '). On (' click ',function(e) {alert ("BB");        }); </script> </body>
On the phone, after clicking on the Q, it will pop up BB's box, why?
Because the TAP event is implemented through document binding of the Touchstart and Touchend events, $ ('. Q ') is executed when the Touchend event bubbles onto the document after executing $ (this). Hide (); At this time $ ('. B '), is at the front of the page,
Now touchend bubbles to the document, and $ ('. B ') is at the front of the page, and then the click event is triggered.
About the Click event 300ms the origin of the delay, as well as the development of the time, encountered problems, various browser solutions and now the various JS method, you can see http://blogs.telerik.com/appbuilder/posts/ 13-11-21/what-exactly-is.....-the-300ms-click-delay ready to translate. Because the inside also introduced Fastclick, hehe.
So Zepto's touch module is really not a good module. But better than my own writing, the key is why always do not solve the problem of the point of penetration ah.
Where's Fastclick?
The practical principle is to bind the Touchstart, Touchend event to the target element and then execute the Click event immediately at the end of the Touchend, which solves the "point-through" problem (which is essentially event bubbling) and the 300ms latency problem. 300MS latency is the effect of the browser in order to enable users to double-click on the screen magnification page (double tap to zoom see my next translation in detail).
FastClick.prototype.sendClick =function(Targetelement, event) {' Use strict '; varclickevent, Touch; //On some Android devices activeelement needs to be blurred otherwise the synthetic Click'll have no effect (#24)     if(Document.activeelement && document.activeelement!==targetelement)    {Document.activeElement.blur (); } Touch= Event.changedtouches[0]; //here is the key, where the Click event is implementedClickevent = document.createevent (' mouseevents ')); Clickevent.initmouseevent ( This. Determineeventtype (Targetelement),true,true, window, 1, Touch.screenx, Touch.screeny, Touch.clientx, Touch.clienty,false,false,false,false, 0,NULL); Clickevent.forwardedtouchevent=true; Targetelement.dispatchevent (clickevent);};
This sendclick will be called immediately at Touchend.
function (event) {          ...             This . Sendclick (Targetelement, event);}
Okay, here's the two.