Zepto tap penetrates bugs and resolves mobile click-through issues

Source: Internet
Author: User

When two layers overlap, or there is a pop-up window, using the Zepto tap event, clicking on the above layer will trigger the next layer of events, especially if the bottom of the input box, must "penetrate", "Google" said the reason is "tap event is actually bubbling to the body when the trigger" , that is, the tap event of Zepto is bound to the document, so it will cause, this has not been proved. For example, when clicking the Close button, if there is a link to the product a below, it will penetrate (close at the same time, trigger the link);

Cause of the phenomenon:

Zepto tap events are simulated by listening to a touch event bound to the document, and the tap event is triggered on the document and then clicked on when the Tap event (Touchstart\touchend) is completed. Need to bubble to document to trigger, and before bubbling to document, the user Hand touch screen (Touchstart) and leave screen (touchend) is triggered by the Click event, because the click event has a delay trigger (this is why the mobile side does not The reason for the tap with click) (probably 300ms, in order to achieve the design of Safari's double-click event), so after the tap event, the pop-up selection component is immediately hidden, the Click event is also in the delay of 300ms, when 300ms arrives, The click is not actually finished but hides the element below, if the element that is directly below the binding of the Click event will be triggered at this time, if there is no binding click event, when there is no click, but just below the input box (or select box or radio check box) ), click the default focus and pop up the input keyboard, there is the above point penetration phenomenon.

Here's how to fix it:

1, the use of GitHub on a library called Fastclick;

2, monitor Touchend event, and use Preventdefault () to prevent bubbling in the event;

function // It is also possible to use the Touchstart event here,     E.preventdefault ();    $ ('. Sec_dlg_eggs '). Remove ();    $ (". Eggs_bg"). Remove ();});

3, the use of CSS3 pointer-events=true,pointer-events=none switch to achieve;

4. Delay a certain amount of time to handle the event. With jquery animation (FadeIn (), FadeOut ()) and other mates feel good;

$ (ID). fadeIn (300);

5. If it doesn't work, the ultimate solution is to use Click to tap;

 in document? "Touchend": "click"function

Below we paste the source code of the zepto.1.1.6 tap event:

;(function($){      varTouch ={}, Touchtimeout, Taptimeout, Swipetimeout, Longtaptimeout, Longtapdelay= 750, gesture
Judging the direction of the left and right slidefunctionswipedirection (x1, x2, y1, y2) {
Math.Abs (): Returns the absolute value of a numberreturnMath.Abs (x1-x2) >= math.abs (y1-y2)? (x1-x2 > 0?) ' Left ': ' Right ': (Y1-y2 > 0?) ' Up ': ' Down ') } functionLongtap () {longtaptimeout=NULL if(touch.last) {Touch.el.trigger (' Longtap ') Touch= {} } } functionCancellongtap () {if(longtaptimeout) cleartimeout (longtaptimeout) longtaptimeout=NULL } functionCancelall () {if(touchtimeout) cleartimeout (touchtimeout)if(taptimeout) cleartimeout (taptimeout)if(swipetimeout) cleartimeout (swipetimeout)if(longtaptimeout) cleartimeout (longtaptimeout) touchtimeout= Taptimeout = Swipetimeout = Longtaptimeout =NULLTouch= {} } functionIsprimarytouch (event) {return(Event.pointertype = = ' Touch ' | | Event.pointertype = = event. Mspointer_type_touch) &&Event.isprimary}functionIspointereventtype (E, type) {return(E.type = = ' pointer ' +type | | e.type.tolowercase () = = ' Mspointer ' +type)} $ (document). Ready (function(){ varNow, delta, deltax = 0, DeltaY = 0, Firsttouch, _ispointertypeif(' MSGesture 'inchwindow) {Gesture=NewMSGesture () gesture.target=Document.body} $ (document). Bind (' Msgestureend ',function(e) {varSwipedirectionfromvelocity =E.velocityx> 1? ' Right ': E.velocityx <-1? ' Left ': e.velocityy > 1? ' Down ': E.velocityy <-1? ' Up ':NULL; if(swipedirectionfromvelocity) {Touch.el.trigger (' Swipe ') Touch.el.trigger (' Swipe ' +swipedirectionfromvelocity)} }). On (' Touchstart mspointerdown pointerdown ',function(e) {if((_ispointertype = Ispointereventtype (E, ' down ')) &&!isprimarytouch (e))returnFirsttouch= _ispointertype? E:e.touches[0] if(e.touches && E.touches.length = = = 1 &&touch.x2) {//Clear out Touch movement data if we have it sticking around //This can occur if touchcancel doesn ' t fire due to preventdefault, etc. TOUCH.X2 =undefined touch.y2=undefined} now=date.now () Delta= Now-(Touch.last | |Now ) Touch.el= $ (' TagName 'inchFirsttouch.target?firstTouch.target:firstTouch.target.parentNode) Touchtimeout&&cleartimeout (touchtimeout) touch.x1=Firsttouch.pagex touch.y1=Firsttouch.pageyif(Delta > 0 && delta <=) Touch.isdoubletap =trueTouch.last=Now longtaptimeout=setTimeout (Longtap, Longtapdelay)//Adds the current touch contact for IE gesture recognition if(Gesture &&_ispointertype) Gesture.addpointer (E.pointerid); }). On (' Touchmove mspointermove pointermove ',function(e) {if((_ispointertype = Ispointereventtype (E, ' move ')) &&!isprimarytouch (e))returnFirsttouch= _ispointertype? E:e.touches[0] Cancellongtap () touch.x2=Firsttouch.pagex touch.y2=Firsttouch.pagey DeltaX+ = Math.Abs (Touch.x1-touch.x2) DeltaY+ = Math.Abs (Touch.y1-touch.y2)}). On (' Touchend Mspointerup Pointerup ',function(e) {if((_ispointertype = Ispointereventtype (E, ' up ')) &&!isprimarytouch (e))returnCancellongtap ()//Swipe if((touch.x2 && math.abs (touch.x1-touch.x2) > 30) | | (Touch.y2 && Math.Abs (touch.y1-touch.y2) > 30)) Swipetimeout= SetTimeout (function() {Touch.el.trigger (' Swipe ') Touch.el.trigger (' Swipe ' +(Swipedirection (touch.x1, touch.x2, Touch.y1, Touch.y2))) Touch= {} }, 0) //Normal Tap Else if(' Last 'inchTouch)//don ' t fire taps when delta position changed by more than-pixels, //For instance when moving to a point and back to Origin if(DeltaX < && DeltaY < 30) { //delay by one tick so we can cancel the ' tap ' event if ' scroll ' fires //(' tap ' fires before ' scroll ')Taptimeout = SetTimeout (function() { //trigger Universal ' tap ' with the option to Canceltouch () //(Canceltouch cancels processing of single vs. double taps for faster ' tap ' response) varEvent = $. Event (' Tap ') Event.canceltouch=Cancelall Touch.el.trigger (event)//trigger double tap immediately if(TOUCH.ISDOUBLETAP) {if(Touch.el) Touch.el.trigger (' Doubletap ')) Touch= {} } //trigger single tap after 250ms of inactivity Else{touchtimeout= SetTimeout (function() {touchtimeout=NULL if(Touch.el) Touch.el.trigger (' Singletap ')) Touch= {} }, 250) } }, 0) } Else{Touch={}} deltax= DeltaY = 0 }) //When the browser window loses focus, //For example if a modal dialog is shown, //Cancel all ongoing events. On (' Touchcancel mspointercancel pointercancel ', Cancelall)//Scrolling the window indicates intention of the user //To Scroll, no tap or swipe, so cancel all ongoing events$ (window). On (' scroll ', Cancelall)}) ; [' Swipe ', ' swipeleft ', ' swiperight ', ' swipeup ', ' swipedown ', ' doubletap ', ' tap ', ' Singletap ', ' Longtap '].foreach (function(eventName) {$.fn[eventname]=function(callback) {return This. On (EventName, callback); })}) (Zepto)

Zepto tap penetrates bugs and resolves mobile click-through issues

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.