ontouchcancel
The ontouchcancel event in HTML is triggered when a touch action is interrupted, enabling scripts to react to the cancellation of touch events.
ontouchcancel event
The ontouchcancel event handler activates a script when a touch event is interrupted or canceled. It’s helpful for managing situations where touch interactions are unexpectedly halted.
Syntax
In HTML
index.html
<element ontouchcancel="myScript">
In JS
script.js
object.ontouchcancel = myScript;
In JavaScript, the addEventListener() function is used.
script.js
object.addEventListener("touchcancel", myScript);
Example
::event-ontouchcancel
::
index.html
<!DOCTYPE html>
<html>
<body>
<h1>DOM touchcancel Event</h1>
<p ontouchcancel="myFunction()">Touch this paragraph while you do something that will interrupt the event. Different devices will interrupt the touch at different actions, so this example can be difficult to demonstrate, but it is considered good practice to include this event.</p>
<p><strong>Note:</strong> This example is for touch devices only.</p>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Touch Cancelled";
}
</script>
</body>
</html>
Values
Conclusion
The ontouchcancel event in HTML is triggered when a touch event is interrupted, such as when the touch is lost due to an external factor like an incoming call or when the user switches apps. This event helps developers handle unexpected cancellations of touch actions, ensuring a smooth user experience on touch-enabled devices.