Mobile-Touch Module

Source: Internet
Author: User

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

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.