0
# Mobile Touch Events
1

2
Touch gesture recognition optimized for mobile devices, including swipe, tap, and pinch gestures. Provides intuitive touch interactions for mobile web applications.
3

4
## Capabilities
5

6
### Touch Events
7

8
Core touch gesture methods for mobile interaction.
9

10
```javascript { .api }
11
/**
12
 * Bind tap gesture event
13
 * @param callback - Function to call on tap
14
 * @returns Original collection
15
 */
16
$.fn.tap(callback);
17

18
/**
19
 * Bind single tap event (excludes double taps)
20
 * @param callback - Function to call on single tap
21
 * @returns Original collection
22
 */
23
$.fn.singleTap(callback);
24

25
/**
26
 * Bind double tap gesture event
27
 * @param callback - Function to call on double tap
28
 * @returns Original collection
29
 */
30
$.fn.doubleTap(callback);
31

32
/**
33
 * Bind long tap/press gesture event
34
 * @param callback - Function to call on long tap
35
 * @returns Original collection
36
 */
37
$.fn.longTap(callback);
38
```
39

40
**Usage Examples:**
41

42
```javascript
43
// Basic tap handling
44
$('.button').tap(function() {
45
  console.log('Button tapped');
46
});
47

48
// Single vs double tap
49
$('.item').singleTap(function() {
50
  $(this).addClass('selected');
51
}).doubleTap(function() {
52
  $(this).addClass('editing');
53
});
54

55
// Long press for context menu
56
$('.item').longTap(function() {
57
  showContextMenu(this);
58
});
59
```
60

61
### Swipe Gestures
62

63
Directional swipe detection for navigation and interaction.
64

65
```javascript { .api }
66
/**
67
 * Bind swipe gesture event (any direction)
68
 * @param callback - Function to call on swipe
69
 * @returns Original collection
70
 */
71
$.fn.swipe(callback);
72

73
/**
74
 * Bind swipe left gesture event
75
 * @param callback - Function to call on swipe left
76
 * @returns Original collection
77
 */
78
$.fn.swipeLeft(callback);
79

80
/**
81
 * Bind swipe right gesture event
82
 * @param callback - Function to call on swipe right
83
 * @returns Original collection
84
 */
85
$.fn.swipeRight(callback);
86

87
/**
88
 * Bind swipe up gesture event
89
 * @param callback - Function to call on swipe up
90
 * @returns Original collection
91
 */
92
$.fn.swipeUp(callback);
93

94
/**
95
 * Bind swipe down gesture event
96
 * @param callback - Function to call on swipe down
97
 * @returns Original collection
98
 */
99
$.fn.swipeDown(callback);
100
```
101

102
**Usage Examples:**
103

104
```javascript
105
// Navigation with swipes
106
$('.carousel').swipeLeft(function() {
107
  showNextSlide();
108
}).swipeRight(function() {
109
  showPrevSlide();
110
});
111

112
// Dismiss with swipe
113
$('.notification').swipeUp(function() {
114
  $(this).fadeOut();
115
});
116

117
// General swipe handling
118
$('.swipeable').swipe(function(e) {
119
  console.log('Swiped in direction:', e.direction);
120
});
121
```
122

123
### Pinch Gestures (iOS)
124

125
Pinch gesture recognition for iOS devices.
126

127
```javascript { .api }
128
/**
129
 * Bind pinch gesture event (iOS only)
130
 * @param callback - Function to call on pinch
131
 * @returns Original collection
132
 */
133
$.fn.pinch(callback);
134

135
/**
136
 * Bind pinch-in gesture event (iOS only)
137
 * @param callback - Function to call on pinch in
138
 * @returns Original collection
139
 */
140
$.fn.pinchIn(callback);
141

142
/**
143
 * Bind pinch-out gesture event (iOS only)
144
 * @param callback - Function to call on pinch out
145
 * @returns Original collection
146
 */
147
$.fn.pinchOut(callback);
148
```
149

150
**Usage Examples:**
151

152
```javascript
153
// Image zoom with pinch
154
$('.zoomable-image').pinchOut(function() {
155
  $(this).addClass('zoomed-in');
156
}).pinchIn(function() {
157
  $(this).removeClass('zoomed-in');
158
});
159

160
// General pinch handling
161
$('.pinchable').pinch(function(e) {
162
  console.log('Pinch scale:', e.scale);
163
});
164
```
165

166
### Event Properties
167

168
Touch event objects contain additional properties for gesture details.
169

170
```javascript { .api }
171
// Touch event properties:
172
// - direction: 'left', 'right', 'up', 'down'
173
// - distance: Distance of swipe in pixels
174
// - deltaX: Horizontal distance
175
// - deltaY: Vertical distance
176
// - scale: Pinch scale factor (pinch events only)
177
// - timeStamp: Event timestamp
178
```
179

180
**Usage Examples:**
181

182
```javascript
183
$('.item').swipe(function(e) {
184
  console.log('Direction:', e.direction);
185
  console.log('Distance:', e.distance);
186
  
187
  if (e.distance > 100) {
188
    // Long swipe
189
    $(this).addClass('long-swipe');
190
  }
191
});
192

193
$('.scalable').pinch(function(e) {
194
  const scale = e.scale;
195
  $(this).css('transform', `scale(${scale})`);
196
});
197
```
198

199
### Touch Configuration
200

201
Customizing touch gesture detection parameters.
202

203
```javascript
204
// Touch gestures work with both 'touch' events (iOS, Android) 
205
// and 'pointer' events (Windows Phone)
206

207
// Gesture thresholds (internal settings):
208
// - Tap: < 30px movement, < 750ms duration
209
// - Long tap: > 750ms duration
210
// - Swipe: > 30px movement, < 1000ms duration
211
// - Double tap: < 300ms between taps
212
```
213

214
### Best Practices
215

216
Optimizing touch interactions for mobile devices.
217

218
```javascript
219
// Prevent default touch behaviors when needed
220
$('.custom-touch').on('touchstart', function(e) {
221
  e.preventDefault(); // Prevent scrolling, zooming, etc.
222
});
223

224
// Combine with CSS for better UX
225
.touchable {
226
  -webkit-tap-highlight-color: transparent;
227
  -webkit-touch-callout: none;
228
  -webkit-user-select: none;
229
}
230

231
// Use touch events for immediate feedback
232
$('.button')
233
  .on('touchstart', function() {
234
    $(this).addClass('pressed');
235
  })
236
  .on('touchend', function() {
237
    $(this).removeClass('pressed');
238
  })
239
  .tap(function() {
240
    // Handle the actual action
241
    performAction();
242
  });
243

244
// Debounce rapid taps
245
let tapTimeout;
246
$('.item').tap(function() {
247
  clearTimeout(tapTimeout);
248
  tapTimeout = setTimeout(() => {
249
    handleTap(this);
250
  }, 100);
251
});
252
```