Several solutions to point-penetrating problems of zepto tap events

1. What is "the point of penetration"?

You may have encountered a pop-up layer on the list page, a popup layer with a close button, and after you click the button to close the popup layer, the content below the button will also perform a click event (or Open link). This is defined as a "point through" phenomenon.

In the previous project encountered a problem such as: the Click on the pop-up selection component in the upper right corner of the completion will let the completion of the input box after the focus, pop-up input keyboard, that is, the point of the

2, why will there be a point of penetration?
This needs to be seen from the source of Zepto (or JQM) about Tap implementation method:

$ (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)}})

It can be seen that the tap of zepto through the touch events bound to the document to complete the TAP event simulation, and the tap event is bubbling to document on the trigger

The Tap event (Touchstart\touchend) that is clicked on when it is completed needs to be bubbling to the document before it is triggered, while the user's hand touches the screen (Touchstart) and leaves the screen (touchend) before bubbling to document. The Click event is triggered because the click event has a delay trigger (which is why the mobile does not use the Click for tap) (presumably 300ms, in order to achieve the design of Safari's double-click event ), so after executing the tap event, the pop-up selection The component is immediately hidden, when the Click event is still in the 300ms of delay, when 300ms arrives, the click is not actually completed but hidden behind the element, if the element is directly below the binding of the Click event will be triggered at this time, If the Click event is not bound, then 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 a point through the phenomenon above.

3, point through the solution:

Scenario One: It's very direct. There's a fastclick on GitHub that can be perfectly solved Https://github.com/ftlabs/fastclick

Introduce Fastclick.js, because the Fastclick source code does not depend on other libraries, so you can add directly to the native JS before

1 Window.addeventlistener ("Load", function () {2     Fastclick.attach (document.body); 3}, False);

Or have zepto or JQM js inside add

1 $ (function () {2     Fastclick.attach (document.body); 3});

Of course, that's require:

1 var Fastclick = require (' Fastclick '); 2 Fastclick.attach (document.body, Options);

Scenario Two: Replace the tap event with Touchend and block the default behavior of Touchend preventdefault ()

1 $ ("#cbFinish"). On ("Touchend", function (event) {2     //A lot of processing such as hiding something 3     event.preventdefault (); 4});

Scenario Three: Delay a certain amount of time (300ms+) to handle the event

1 $ ("#cbFinish"). On ("tap", function (event) {2     setTimeout () (function () {3     ///a lot of processing such as 4},320 of what is hidden     ); 5});    

This method is actually very good, can be used in combination with fadeinin/fadeout and other animations, can make excessive effect

Theoretically, the above method can solve the tap problem perfectly, if it's stubborn enough, click

Several solutions to point-penetrating problems of zepto tap events