Several solutions to point-penetrating problems of zepto tap events

Analysis of tap incident point penetration problem in Zepto:

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:

1$ (document). Ready (function(){2     varNow, delta, deltax = 0, DeltaY = 0, Firsttouch, _ispointertype3 4     if(' MSGesture 'inchwindow) {5Gesture =NewMSGesture ()6Gesture.target =document.body7     }8 9 $ (document)Ten. bind (' Msgestureend ',function(e) { One         varSwipedirectionfromvelocity = AE.velocityx > 1? ' Right ': E.velocityx <-1? ' Left ': e.velocityy > 1? ' Down ': E.velocityy <-1? ' Up ':NULL; -         if(swipedirectionfromvelocity) { -Touch.el.trigger (' swipe ') theTouch.el.trigger (' swipe ' +swipedirectionfromvelocity) -         } -       }) -. On (' Touchstart mspointerdown pointerdown ',function(e) { +         if(_ispointertype = Ispointereventtype (E, ' down ')) && -!isprimarytouch (e))return +Firsttouch = _ispointertype? E:e.touches[0] A         if(e.touches && E.touches.length = = = 1 &&touch.x2) { at           //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 () inDelta = now-(Touch.last | |Now ) -Touch.el = $ (' TagName 'inchFirsttouch.target? to FirstTouch.target:firstTouch.target.parentNode) +Touchtimeout &&cleartimeout (touchtimeout) -Touch.x1 =Firsttouch.pagex theTouch.y1 =Firsttouch.pagey *         if(Delta > 0 && delta <=) Touch.isdoubletap =true $Touch.last = NowPanax NotoginsengLongtaptimeout =setTimeout (Longtap, Longtapdelay) -         //Adds the current touch contact for IE gesture recognition the         if(Gesture &&_ispointertype) Gesture.addpointer (E.pointerid); +       }) A. On (' Touchmove mspointermove pointermove ',function(e) { the         if((_ispointertype = Ispointereventtype (E, ' move ')) && +!isprimarytouch (e))return -Firsttouch = _ispointertype? E:e.touches[0] $ Cancellongtap () $TOUCH.X2 =Firsttouch.pagex -Touch.y2 =Firsttouch.pagey -  theDeltaX + = Math.Abs (Touch.x1-touch.x2) -DeltaY + = Math.Abs (Touch.y1-touch.y2)Wuyi       }) the. On (' Touchend Mspointerup Pointerup ',function(e) { -         if(_ispointertype = Ispointereventtype (E, ' up ')) && Wu!isprimarytouch (e))return - Cancellongtap () About  $         //Swipe -         if((touch.x2 && math.abs (touch.x1-touch.x2) > 30) | | -(Touch.y2 && Math.Abs (touch.y1-touch.y2) > 30)) -  ASwipetimeout = SetTimeout (function() { +Touch.el.trigger (' swipe ') theTouch.el.trigger (' swipe ' +(Swipedirection (touch.x1, touch.x2, Touch.y1, Touch.y2))) -Touch = {} $}, 0) the  the         //Normal Tap the         Else if(' Last 'inchTouch) the           //don ' t fire taps when delta position changed by more than-pixels, -           //For instance when moving to a point and back to Origin in           if(DeltaX < && DeltaY < 30) { the             //delay by one tick so we can cancel the ' tap ' event if ' scroll ' fires the             //(' tap ' fires before ' scroll ') AboutTaptimeout = SetTimeout (function() { the  the               //trigger Universal ' tap ' with the option to Canceltouch () the               //(Canceltouch cancels processing of single vs. double taps for faster ' tap ' response) +               varEvent = $. Event (' Tap ') -Event.canceltouch =Cancelall the Touch.el.trigger (Event)Bayi  the               //trigger double tap immediately the               if(TOUCH.ISDOUBLETAP) { -                 if(Touch.el) Touch.el.trigger (' Doubletap ')) -Touch = {} the               } the  the               //trigger single tap after 250ms of inactivity the               Else { -Touchtimeout = SetTimeout (function(){ theTouchtimeout =NULL the                   if(Touch.el) Touch.el.trigger (' Singletap ')) theTouch = {}94}, 250) the               } the}, 0) the}Else {98Touch = {} About           } -DeltaX = DeltaY = 0101 102       })103       //When the browser window loses focus,104       //For example if a modal dialog is shown, the       //Cancel all ongoing events106. On (' Touchcancel mspointercancel pointercancel ', Cancelall)107 108     //Scrolling the window indicates intention of the user109     //To Scroll, no tap or swipe, so cancel all ongoing events the$ (window). On (' scroll ', Cancelall)111   }) the 113; [' Swipe ', ' swipeleft ', ' swiperight ', ' swipeup ', ' Swipedown ', the' Doubletap ', ' tap ', ' Singletap ', ' Longtap '].foreach (function(eventName) { the$.fn[eventname] =function(callback) {return  This. On (EventName, callback)} the})

View Code

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 selected component is immediately hidden, when the Click event is still in the delay of 300ms, when the 300ms arrives, the click is actually not complete but hidden after the element below, 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 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 function (event) {2     // a lot of processing, like hiding something. 3     Event.preventdefault (); 4 });

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

1 function (event) {2     setTimeout (function() {3     ///  A lot of 4},320 that deal with things like hiding something      ); 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