HTML ontouchcancel Event Attribute

If this site has been useful, we’d love your support! 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

HTML

<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>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML ontouchcancel event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.