Touch Events in JavaScript

1// Method 1: Basic touch events
2const element = document.getElementById('myElement');
3
4element.addEventListener('touchstart', function(e) {
5    console.log('Touch started');
6    console.log('Touches:', e.touches.length);
7    const touch = e.touches[0];
8    console.log('X:', touch.clientX, 'Y:', touch.clientY);
9});
10
11element.addEventListener('touchmove', function(e) {
12    e.preventDefault(); // Prevent scrolling
13    console.log('Touch moving');
14    const touch = e.touches[0];
15    console.log('Position:', touch.clientX, touch.clientY);
16});
17
18element.addEventListener('touchend', function(e) {
19    console.log('Touch ended');
20    console.log('Changed touches:', e.changedTouches.length);
21});
22
23element.addEventListener('touchcancel', function(e) {
24    console.log('Touch cancelled');
25});
26
27// Method 2: Multi-touch
28element.addEventListener('touchstart', function(e) {
29    if (e.touches.length === 2) {
30        console.log('Two finger touch');
31        const touch1 = e.touches[0];
32        const touch2 = e.touches[1];
33        
34        const distance = Math.sqrt(
35            Math.pow(touch2.clientX - touch1.clientX, 2) +
36            Math.pow(touch2.clientY - touch1.clientY, 2)
37        );
38        console.log('Distance:', distance);
39    }
40});
41
42// Method 3: Swipe detection
43let touchStartX, touchStartY;
44
45element.addEventListener('touchstart', function(e) {
46    touchStartX = e.touches[0].clientX;
47    touchStartY = e.touches[0].clientY;
48});
49
50element.addEventListener('touchend', function(e) {
51    const touchEndX = e.changedTouches[0].clientX;
52    const touchEndY = e.changedTouches[0].clientY;
53    
54    const deltaX = touchEndX - touchStartX;
55    const deltaY = touchEndY - touchStartY;
56    
57    const minSwipeDistance = 50;
58    
59    if (Math.abs(deltaX) > Math.abs(deltaY)) {
60        // Horizontal swipe
61        if (deltaX > minSwipeDistance) {
62            console.log('Swipe right');
63        } else if (deltaX < -minSwipeDistance) {
64            console.log('Swipe left');
65        }
66    } else {
67        // Vertical swipe
68        if (deltaY > minSwipeDistance) {
69            console.log('Swipe down');
70        } else if (deltaY < -minSwipeDistance) {
71            console.log('Swipe up');
72        }
73    }
74});
75
76// Method 4: Pinch zoom
77let initialDistance = 0;
78
79element.addEventListener('touchstart', function(e) {
80    if (e.touches.length === 2) {
81        const touch1 = e.touches[0];
82        const touch2 = e.touches[1];
83        initialDistance = Math.sqrt(
84            Math.pow(touch2.clientX - touch1.clientX, 2) +
85            Math.pow(touch2.clientY - touch1.clientY, 2)
86        );
87    }
88});
89
90element.addEventListener('touchmove', function(e) {
91    if (e.touches.length === 2) {
92        const touch1 = e.touches[0];
93        const touch2 = e.touches[1];
94        const currentDistance = Math.sqrt(
95            Math.pow(touch2.clientX - touch1.clientX, 2) +
96            Math.pow(touch2.clientY - touch1.clientY, 2)
97        );
98        
99        const scale = currentDistance / initialDistance;
100        console.log('Scale:', scale);
101        
102        if (scale > 1.1) {
103            console.log('Pinch out (zoom in)');
104        } else if (scale < 0.9) {
105            console.log('Pinch in (zoom out)');
106        }
107    }
108});
109
110// Method 5: Tap vs long press
111let pressTimer;
112
113element.addEventListener('touchstart', function(e) {
114    pressTimer = setTimeout(function() {
115        console.log('Long press detected');
116        // Handle long press
117    }, 500); // 500ms
118});
119
120element.addEventListener('touchend', function(e) {
121    clearTimeout(pressTimer);
122    console.log('Tap detected');
123});
124
125element.addEventListener('touchmove', function(e) {
126    clearTimeout(pressTimer);
127});