HTML ontouchcancel Event Attribute
Description
The ontouchcancel
HTML event attribute is used to specify a function to be executed when a touch event is interrupted. This can occur for a variety of reasons, such as:
- The user removes their finger from the touch surface.
- The user puts down too many fingers on the touch surface.
- The user interacts with a non-touch element on the page.
- The touch event is canceled by the user agent.
The ontouchcancel
event is typically used to clean up any state that was created by the touch event. For example, if a touch event is used to start a drag-and-drop operation, the ontouchcancel
event can be used to cancel the drag-and-drop operation.
The ontouchcancel
event can be specified in HTML using the ontouchcancel
attribute, or in JavaScript using the addEventListener()
method.
For example, the following HTML code would specify a function to be executed when a touch event is canceled on the <div>
element:
<div ontouchcancel="myFunction()">...</div>
The following JavaScript code would do the same thing:
document.querySelector('div').addEventListener('touchcancel', myFunction);
In both cases, the myFunction()
function would be executed when a touch event is canceled on the <div>
element.
Syntax
<element ontouchcancel="script">
Values
- scriptThe name of the script to use when the event has been triggered.
Example
<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>
Browser Support
The following table will show you the current browser support for the HTML ontouchcancel
Event Attribute.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 21st October 2023