When you write the touch event, there will always be a variety of bugs, just found Zepto touch module, very useful, and because of Zepto and jquery syntax similarity, this module can be directly referenced to jquery,
It takes time to digest it so that you can do whatever you want ...
varTouch ={},touchtimeout, taptimeout, Swipetimeout, Longtaptimeout,longtapdelay= -, Gesturefunction swipedirection (x1, x2, y1, y2) {//determining the sliding directionreturnMath.Abs (X1-X2) >=Math.Abs (y1-y2)? (X1-x2 >0?' Left':' Right'): (Y1-y2 >0?' up':' Down')}function Longtap () {//Long PressLongtaptimeout =NULLif(touch.last) {Touch.el.trigger ('Longtap') Touch={}}}function Cancellongtap () {//Cancel Long Pressif(longtaptimeout) cleartimeout (longtaptimeout) longtaptimeout=NULL}function Cancelall () {//Cancel Allif(touchtimeout) cleartimeout (touchtimeout)if(taptimeout) cleartimeout (taptimeout)if(swipetimeout) cleartimeout (swipetimeout)if(longtaptimeout) cleartimeout (longtaptimeout) touchtimeout= Taptimeout = Swipetimeout = Longtaptimeout =NULLTouch={}}function Isprimarytouch (Event){return(Event. PointerType = ='Touch'||Event. PointerType = =Event. Mspointer_type_touch)&&Event. Isprimary}function Ispointereventtype (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) {//newly added recognition support for advanced user input in IE10Gesture =NewMSGesture ()//instance Gesture ObjectGesture.target =document.body}$ (document). Bind ('Msgestureend', function (e) {//similar to MouseUp, compatible with touch screen and mouse operationvarSwipedirectionfromvelocity =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 =Undefinedtouch.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.pageXtouch.y1=Firsttouch.pageyif(Delta >0&& Delta <= -) Touch.isdoubletap =trueTouch.last=Nowlongtaptimeout=setTimeout (Longtap, Longtapdelay)//Adds the current touch contact for IE gesture recognitionif(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.pageXtouch.y2=Firsttouch.pageydeltax+ = 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 ()//Swipeif((touch.x2 && math.abs (touch.x1-touch.x2) > -) ||(Touch.y2&& Math.Abs (Touch.y1-touch.y2) > -)) Swipetimeout=setTimeout (function () {Touch.el.trigger ('Swipe') Touch.el.trigger ('Swipe'+(Swipedirection (touch.x1, touch.x2, Touch.y1, Touch.y2))) Touch= {}}, 0)//Normal TapElse 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 Originif(DeltaX < -&& DeltaY < -) {//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)var Event= $. Event ('Tap')Event. Canceltouch =CancelAlltouch.el.trigger (Event)//trigger double tap immediatelyif(TOUCH.ISDOUBLETAP) {if(Touch.el) Touch.el.trigger ('Doubletap') Touch= {}}//trigger single tap after 250ms of inactivityElse{touchtimeout=setTimeout (function () {touchtimeout=NULLif(Touch.el) Touch.el.trigger ('Singletap') Touch= {}}, -)}}, 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)
Mobile-Touch Module