Zepto.js Touch,tap Add Touch module in-depth analysis

1. What the Touch Library implements and introduces the background

The click Event has a 300ms latency on the mobile side, and because of the need for 长按 双触击 rich interaction, we usually introduce libraries like zepto. The Zepto in touch Library implements ‘swipe‘, ‘swipeLeft‘, ‘swipeRight‘, ‘swipeUp‘, ‘swipeDown‘, ‘doubleTap‘, ‘tap‘, ‘singleTap‘, ‘longTap‘ some of these features.

2, Touch Library implementation‘swipe‘, ‘swipeLeft‘, ‘swipeRight‘, ‘swipeUp‘, ‘swipeDown‘, ‘doubleTap‘, ‘tap‘, ‘singleTap‘, ‘longTap‘重要源代码（绑定在touchend事件上）

Dealing with touch events allows you to understand the location of each finger of the user, which is generated when the touch event is triggered, and can be retrieved through the event object of the touch events handler, which is generally obtained by acquiring properties based on Zepto.js development event.touches[0] .

Important attributes

• ClientX, ClientY: The location of the touch point relative to the browser window viewport
• PageX, Pagey: The position of the touch point relative to the page
• Screenx,screeny: The position of the touch point relative to the screen
• Identifier:touch: Unique ID of the object

You can bind the following four touch events to understand basic touch events:

• Touchstart: Trigger when finger touches the screen
• Touchmove: Triggers when the finger moves on the screen
• Touchend: Triggers when the finger picks up from the screen
• Touchcancel: Triggered when the system cancels the touch event

The touch module adds the following events, which can be bound using on and off.

• tap-triggers when the element taps.
• singleTapdoubleTapand-This pair of events can be used to detect clicks and double clicks on an element. (If you don't need to detect click, double click, use tap instead).
• longTap-When an element is pressed, the trigger is more than 750ms.
• swipe,,,, swipeLeft swipeRight swipeUp swipeDown -When the element is crossed out of the trigger. (You can select a given direction)

These events are also shortcut methods on all Zepto object collections.

Operating instructions

When you touch the screen and lift your finger, only trigger touchstart and touched, and when the finger touches the screen and moves it will trigger Touchstart, multiple touchmove,touchend or Touchcanel, It can be encapsulated according to basic touch events as you want to achieve complex effects, such as swiping left or right, swiping up or down, and encapsulating what you want to achieve when you swipe.

The touch.js encapsulates the handling of the sliding event and adds it to its own project, which directly invokes the right, right, top, and bottom swipe events. In this way, the example in the Zepto.js official website manual can be run normally.

Using the example

<style>.Delete{Display: None;}</style><ul ID=items><li>list Item1<spanClass=Delete>delete</span></li><li>list Item2<spanClass=Delete>delete</span></li></ul><script>Show Delete buttons on swipe$(' #items Li ').Swipe(function(){$('. Delete ').Hide()$('. Delete ',This).Show()})Delete Row on tapping Delete button$('. Delete ').tap (function ({$ (thisparent ( ' li ' . Remove (}</script> 
 the zepto.js downloaded from the official website add the following code 
         

;
(function ($) {
var touch = {},
Touchtimeout, Taptimeout, Swipetimeout, Longtaptimeout,
Longtapdelay = 750,
Gesture
function swipedirection (x1, x2, y1, y2) {
Return Math.Abs (X1-X2) >=
Math.Abs (y1-y2)? (x1-x2 > 0?) ' Left ': ' Right ': (Y1-y2 > 0?) ' Up ': ' Down ')
}
function Longtap () {
Longtaptimeout = null
if (touch.last) {
Touch.el.trigger (' Longtap ')
Touch = {}
}
}
function Cancellongtap () {
if (longtaptimeout) cleartimeout (longtaptimeout)
Longtaptimeout = null
}
function Cancelall () {
if (touchtimeout) cleartimeout (touchtimeout)
if (taptimeout) cleartimeout (taptimeout)
if (swipetimeout) cleartimeout (swipetimeout)
if (longtaptimeout) cleartimeout (longtaptimeout)
Touchtimeout = Taptimeout = Swipetimeout = Longtaptimeout = null
Touch = {}
}
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 () {
var now, delta, deltax = 0,
DeltaY = 0,
Firsttouch, _ispointertype
if (' MSGesture ' in window) {
gesture = new MSGesture ()
Gesture.target = Document.body
}
$ (document)
. bind (' Msgestureend ', function (e) {
var swipedirectionfromvelocity =
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)) return
Firsttouch = _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 ' in Firsttouch.target? firstTouch.target:firstTouch.target.parentNode)
Touchtimeout && cleartimeout (touchtimeout)
Touch.x1 = Firsttouch.pagex
Touch.y1 = Firsttouch.pagey
if (Delta > 0 && delta <=) Touch.isdoubletap = True
Touch.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)) return
Firsttouch = _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)) return
Cancellongtap ()
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 ' in touch)
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)
var event = $. 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)

The effect is realized

 < Span class= "token punctuation" >< Span class= "token punctuation" > &NBSP;          

Zepto.js Touch,tap Add Touch module in-depth analysis