swipe eventversion added: 1.0
Description: Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration.
jQuery( window ).on( "swipe", function( event ) { ... } )
Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration but these can be configured:
-
$.event.special.swipe.scrollSupressionThreshold
(default: 10px) – More than this horizontal displacement, and we will suppress scrolling. -
$.event.special.swipe.durationThreshold
(default: 1000ms) – More time than this, and it isn't a swipe. -
$.event.special.swipe.horizontalDistanceThreshold
(default: 30px) – Swipe horizontal displacement must be more than this. -
$.event.special.swipe.verticalDistanceThreshold
(default: 30px) – Swipe vertical displacement must be less than this.
The swipe event can also be extend to add your own logic or functionality. The following methods can be extended:
-
$.event.special.swipe.start
Default:123456789function( event ) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event;
return {
time: ( new Date() ).getTime(),
coords: [ data.pageX, data.pageY ],
origin: $( event.target )
};
}
This method recieves a touchstart event and returns an object of data about the starting location.
-
$.event.special.swipe.stop
Default:12345678function( event ) {
var data = event.originalEvent.touches ?
event.originalEvent.touches[ 0 ] : event;
return {
time: ( new Date() ).getTime(),
coords: [ data.pageX, data.pageY ]
};
}
This method recieves a touchend event and returns an object of data about the ending location.
-
$.event.special.swipe.handleSwipe
Default:123456789function( start, stop ) {
if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
start.origin.trigger( "swipe" )
.trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
}
}
This method recieves the start and stop objects and handles the logic for and triggering for the swipe events.
Example:
A simple example of the capturing and acting upon a swipe event
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
|