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
HTML DOM TouchEvent Object
The HTML DOM TouchEvent Object represents events that occur when users interact with HTML document elements using touch-enabled devices like smartphones, tablets, or touch screens. Touch events are essential for creating responsive mobile web applications.
TouchEvent Properties
The TouchEvent object provides several properties to detect modifier key states and touch point information −
| Property | Description |
|---|---|
| altKey | Returns a Boolean value indicating if the Alt key was pressed when the touch event was fired. |
| changedTouches | Returns a TouchList object containing all contact points that triggered a state change in the touch event. |
| ctrlKey | Returns a Boolean value indicating if the Ctrl key was pressed when the touch event was fired. |
| metaKey | Returns a Boolean value indicating if the Meta key was pressed when the touch event was fired. |
| shiftKey | Returns a Boolean value indicating if the Shift key was pressed when the touch event was fired. |
| targetTouches | Returns a TouchList object containing all contact points that are currently touching the surface and started on the target element. |
| touches | Returns a TouchList object containing all contact points currently touching the surface, regardless of target or changed state. |
Touch Event Types
TouchEvent supports four main event types for different touch interactions −
| Event | Description |
|---|---|
| ontouchstart | Triggered when a finger touches the touch screen. |
| ontouchmove | Triggered when a finger moves across the touch screen. |
| ontouchend | Triggered when a finger is removed from the touch screen. |
| ontouchcancel | Triggered when a touch event is interrupted (e.g., by a phone call or system alert). |
Example − TouchEvent ctrlKey Property
This example demonstrates how to detect if the Ctrl key was pressed during a touch event −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM TouchEvent ctrlKey</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
font-family: Arial, sans-serif;
}
.color-indicators {
display: flex;
justify-content: center;
margin: 10px 0;
}
.color-box {
width: 40px;
height: 30px;
margin: 0 5px;
color: white;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
#status {
padding: 15px;
margin: 10px 0;
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
}
</style>
</head>
<body>
<form id="touchArea" ontouchstart="handleTouch(event)">
<h2>Touch with Modifier Keys</h2>
<p>Touch this area while holding different keys:</p>
<div class="color-indicators">
<div class="color-box" style="background-color: #FF8A00;">Alt</div>
<div class="color-box" style="background-color: #F44336;">Ctrl</div>
<div class="color-box" style="background-color: #03A9F4;">Meta</div>
<div class="color-box" style="background-color: #4CAF50;">Shift</div>
</div>
<div id="status">Touch to detect modifier keys</div>
</form>
<script>
function handleTouch(event) {
const touchArea = document.getElementById("touchArea");
const status = document.getElementById("status");
if (event.ctrlKey) {
touchArea.style.backgroundColor = '#F44336';
touchArea.style.color = 'white';
status.textContent = 'Ctrl key was pressed during touch!';
} else if (event.altKey) {
touchArea.style.backgroundColor = '#FF8A00';
touchArea.style.color = 'white';
status.textContent = 'Alt key was pressed during touch!';
} else if (event.metaKey) {
touchArea.style.backgroundColor = '#03A9F4';
touchArea.style.color = 'white';
status.textContent = 'Meta key was pressed during touch!';
} else if (event.shiftKey) {
touchArea.style.backgroundColor = '#4CAF50';
touchArea.style.color = 'white';
status.textContent = 'Shift key was pressed during touch!';
} else {
touchArea.style.backgroundColor = '#f8f9fa';
touchArea.style.color = 'black';
status.textContent = 'No modifier key detected';
}
}
</script>
</body>
</html>
The output shows different colored backgrounds based on which modifier key is held during the touch event −
Touch with Modifier Keys Touch this area while holding different keys: [Alt] [Ctrl] [Meta] [Shift] (colored boxes) Touch to detect modifier keys (status area)
Example − Touch Duration Game
This example demonstrates ontouchstart and ontouchend events by creating a simple touch-and-hold game −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM touchend event</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
#gameButton {
border-radius: 50%;
font-size: 18px;
padding: 30px;
border: 4px solid #dc3545;
background: rgba(220, 53, 69, 0.7);
color: white;
cursor: pointer;
margin: 20px;
}
#gameButton:active {
background: rgba(220, 53, 69, 1);
transform: scale(0.95);
}
#status {
padding: 15px;
margin: 20px 0;
font-size: 18px;
border: 2px solid #28a745;
border-radius: 8px;
background-color: #f8f9fa;
}
.win {
background-color: #d4edda !important;
color: #155724;
}
</style>
</head>
<body>
<h2>Touch Duration Challenge</h2>
<p>Hold the button for exactly 2 seconds to win!</p>
<button id="gameButton">Hold Me</button>
<div id="status">Press and hold the button for 2 seconds</div>
<script>
const gameButton = document.getElementById("gameButton");
const status = document.getElementById("status");
const targetDuration = 2000; // 2 seconds
let timer;
let startTime;
gameButton.ontouchstart = function() {
startTime = Date.now();
timer = setTimeout(victory, targetDuration);
status.textContent = "Keep holding...";
status.className = "";
};
gameButton.ontouchend = function() {
if (timer) {
clearTimeout(timer);
const holdTime = Date.now() - startTime;
const seconds = (holdTime / 1000).toFixed(1);
if (holdTime >= targetDuration) {
victory();
} else {
status.textContent = `Too short! You held for ${seconds} seconds. Try again!`;
}
}
};
function victory() {
status.textContent = "? You Win! Perfect timing!";
status.className = "win";
clearTimeout(timer);
}
</script>
</body>
</html>
The game provides feedback based on how long the user holds the touch −
Touch Duration Challenge Hold the button for exactly 2 seconds to win! [Hold Me] (circular button) Press and hold the button for 2 seconds (When successful: ? You Win! Perfect timing!) (When too short: Too short! You held for 1.2 seconds. Try again!)
Browser Compatibility
TouchEvent is widely supported on modern mobile browsers and touch-enabled desktop browsers. However, testing should be done on actual touch devices for the best user experience. On desktop browsers, touch events may not fire unless using developer tools to simulate touch input.
Key Points
-
TouchEvent objects provide detailed information about touch interactions including modifier key states.
-
Use
touches,targetTouches, andchangedTouchesproperties to access touch point data. -
Always test touch events on actual touch devices for accurate behavior.
-
Touch events can be combined with modifier keys (Ctrl, Alt, Meta, Shift) for enhanced interactions.
Conclusion
The HTML DOM TouchEvent Object enables developers to create interactive touch-based experiences for mobile and touch-enabled devices. By understanding the various properties and event types, you can build responsive applications that detect touch gestures, modifier key combinations, and multi-touch interactions effectively.
237 Views
