Zepto tap penetrates bugs and resolves mobile click-through issues

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