HTML ontouchcancel Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 21st October 2023