HTML DOM touchcancel Event



The HTML DOM touchcancel event is triggered when one or more touch events are interrupted.

NOTE: This event is only for touch devices.

Following is the syntax −

Trigger touchcancel event in HTML −

ontouchcancel = "eventFunction()"

Trigger touchcancel event in JavaScript −

eventObject.ontouchcancel = eventFunction

Let us see an example of touchcancel event property −

Example

<!DOCTYPE html> <html> <head> <title>HTML DOM touchcancel event</title> <style>    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } </style> </head> <body>    <form>       <fieldset>          <legend>HTML-DOM-touchcancel-event</legend>          <label for="textSelect">Proverb --></label>          <input type="text" ontouchcancel="eventAction()" id="textSelect" size="30" value="Too many    cooks spoil the broth" disabled>          <div id="divDisplay"></div>       </fieldset>    </form> <script>    var divDisplay = document.getElementById("divDisplay");    var textSelect = document.getElementById("textSelect");    function eventAction() {       divDisplay.textContent = 'Too many touch events triggered and disrupted';    } </script> </body> </html>

Output

Before touching the screen −

After triggering multiple touch events on the screen −

Updated on: 2021-12-21T10:09:52+05:30

242 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements