Touch Events

// Method 1: Basic touch events
const element = document.getElementById('myElement');

element.addEventListener('touchstart', function(e) {
    console.log('Touch started');
    console.log('Touches:', e.touches.length);
    const touch = e.touches[0];
    console.log('X:', touch.clientX, 'Y:', touch.clientY);
});

element.addEventListener('touchmove', function(e) {
    e.preventDefault(); // Prevent scrolling
    console.log('Touch moving');
    const touch = e.touches[0];
    console.log('Position:', touch.clientX, touch.clientY);
});

element.addEventListener('touchend', function(e) {
    console.log('Touch ended');
    console.log('Changed touches:', e.changedTouches.length);
});

element.addEventListener('touchcancel', function(e) {
    console.log('Touch cancelled');
});

// Method 2: Multi-touch
element.addEventListener('touchstart', function(e) {
    if (e.touches.length === 2) {
        console.log('Two finger touch');
        const touch1 = e.touches[0];
        const touch2 = e.touches[1];
        
        const distance = Math.sqrt(
            Math.pow(touch2.clientX - touch1.clientX, 2) +
            Math.pow(touch2.clientY - touch1.clientY, 2)
        );
        console.log('Distance:', distance);
    }
});

// Method 3: Swipe detection
let touchStartX, touchStartY;

element.addEventListener('touchstart', function(e) {
    touchStartX = e.touches[0].clientX;
    touchStartY = e.touches[0].clientY;
});

element.addEventListener('touchend', function(e) {
    const touchEndX = e.changedTouches[0].clientX;
    const touchEndY = e.changedTouches[0].clientY;
    
    const deltaX = touchEndX - touchStartX;
    const deltaY = touchEndY - touchStartY;
    
    const minSwipeDistance = 50;
    
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
        // Horizontal swipe
        if (deltaX > minSwipeDistance) {
            console.log('Swipe right');
        } else if (deltaX < -minSwipeDistance) {
            console.log('Swipe left');
        }
    } else {
        // Vertical swipe
        if (deltaY > minSwipeDistance) {
            console.log('Swipe down');
        } else if (deltaY < -minSwipeDistance) {
            console.log('Swipe up');
        }
    }
});

// Method 4: Pinch zoom
let initialDistance = 0;

element.addEventListener('touchstart', function(e) {
    if (e.touches.length === 2) {
        const touch1 = e.touches[0];
        const touch2 = e.touches[1];
        initialDistance = Math.sqrt(
            Math.pow(touch2.clientX - touch1.clientX, 2) +
            Math.pow(touch2.clientY - touch1.clientY, 2)
        );
    }
});

element.addEventListener('touchmove', function(e) {
    if (e.touches.length === 2) {
        const touch1 = e.touches[0];
        const touch2 = e.touches[1];
        const currentDistance = Math.sqrt(
            Math.pow(touch2.clientX - touch1.clientX, 2) +
            Math.pow(touch2.clientY - touch1.clientY, 2)
        );
        
        const scale = currentDistance / initialDistance;
        console.log('Scale:', scale);
        
        if (scale > 1.1) {
            console.log('Pinch out (zoom in)');
        } else if (scale < 0.9) {
            console.log('Pinch in (zoom out)');
        }
    }
});

// Method 5: Tap vs long press
let pressTimer;

element.addEventListener('touchstart', function(e) {
    pressTimer = setTimeout(function() {
        console.log('Long press detected');
        // Handle long press
    }, 500); // 500ms
});

element.addEventListener('touchend', function(e) {
    clearTimeout(pressTimer);
    console.log('Tap detected');
});

element.addEventListener('touchmove', function(e) {
    clearTimeout(pressTimer);
});