Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Explain touch events in JavaScript
Touch events in JavaScript are fired when a user interacts with a touchscreen device. These events provide a way to handle touch-based interactions on mobile devices, tablets, and other touch-enabled screens.
Touch Event Types
JavaScript provides four main touch events for handling different stages of touch interaction:
| Event | Description |
|---|---|
| touchstart | Fired when the touch point is placed on the touch surface |
| touchmove | Fired when the touch point is moved along the touch surface |
| touchend | Fired when the touch point is removed from the touch surface |
| touchcancel | Fired when the touch point has been disrupted (e.g., by a system dialog) |
Basic Touch Event Example
Here's a simple example demonstrating the touchstart event:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Touch Events Demo</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.touch-area {
background-color: #f0f8ff;
border: 2px solid #4169e1;
padding: 30px;
margin: 20px 0;
text-align: center;
border-radius: 8px;
cursor: pointer;
}
.result {
background-color: #e8f5e8;
padding: 15px;
border-radius: 5px;
margin-top: 10px;
min-height: 20px;
}
</style>
</head>
<body>
<h2>Touch Events Demo</h2>
<div class="touch-area">Touch this area</div>
<div class="result" id="output">Touch the area above to see events</div>
<script>
const touchArea = document.querySelector('.touch-area');
const output = document.getElementById('output');
touchArea.addEventListener('touchstart', function(e) {
output.innerHTML = 'Touch started!';
});
touchArea.addEventListener('touchend', function(e) {
output.innerHTML = 'Touch ended!';
});
touchArea.addEventListener('touchmove', function(e) {
e.preventDefault(); // Prevent scrolling
output.innerHTML = 'Touch moving...';
});
</script>
</body>
</html>
Advanced Touch Event Properties
Touch events provide access to touch-specific information through the event object:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Touch Properties Demo</title>
<style>
.touch-zone {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
padding: 40px;
margin: 20px 0;
color: white;
text-align: center;
border-radius: 10px;
user-select: none;
}
.info {
background-color: #f8f9fa;
padding: 15px;
border-left: 4px solid #007bff;
margin: 10px 0;
}
</style>
</head>
<body>
<h2>Touch Properties Demo</h2>
<div class="touch-zone" id="touchZone">
Touch and move your finger here
</div>
<div class="info" id="touchInfo">
Touch information will appear here
</div>
<script>
const touchZone = document.getElementById('touchZone');
const touchInfo = document.getElementById('touchInfo');
touchZone.addEventListener('touchstart', function(e) {
const touch = e.touches[0];
touchInfo.innerHTML = `
<strong>Touch Start:</strong><br>
Number of touches: ${e.touches.length}<br>
Position: (${Math.round(touch.clientX)}, ${Math.round(touch.clientY)})
`;
});
touchZone.addEventListener('touchmove', function(e) {
e.preventDefault();
const touch = e.touches[0];
touchInfo.innerHTML = `
<strong>Touch Move:</strong><br>
Position: (${Math.round(touch.clientX)}, ${Math.round(touch.clientY)})<br>
Page position: (${Math.round(touch.pageX)}, ${Math.round(touch.pageY)})
`;
});
touchZone.addEventListener('touchend', function(e) {
touchInfo.innerHTML = `
<strong>Touch End:</strong><br>
Remaining touches: ${e.touches.length}
`;
});
</script>
</body>
</html>
Key Touch Properties
-
e.touches- List of all touch points currently on the surface -
e.targetTouches- List of touch points on the target element -
e.changedTouches- List of touch points that changed in this event -
touch.clientX/clientY- Position relative to the viewport -
touch.pageX/pageY- Position relative to the document
Browser Compatibility
Touch events are supported in all modern mobile browsers and most desktop browsers with touch capabilities. Always test on actual devices for the best results.
Conclusion
Touch events provide essential functionality for creating responsive touch interfaces. Use touchstart, touchmove, and touchend to handle basic interactions, and access touch properties for advanced gesture recognition.
Updated on: 2026-03-15T23:18:59+05:30
5K+ Views
Advertisements