

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM TouchEvent touches Property
The HTML DOM TouchEvent touches property returns a TouchList object corresponding to a list of all contact points triggered on a touch surface.
NOTE: If a touch is triggered on the specified node or any of its child nodes then the following touches will count even if they are not triggered on the same node.
Following is the syntax −
Returning TouchList object
event.touches
Note: We ran Touch event examples on Online HTML Editors accessed on Mobile or systems with touch access. This is done so that we can perform touch operations like touch the screen for 2 seconds.
Let us see an example of TouchEvent touches property −
Example
<!DOCTYPE html> <html> <head> <title>TouchEvent touches</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 id="formSelect" ontouchstart="startEventAction(event)" ontouchend="endEventAction(event)"> <fieldset> <legend>TouchEvent-touches</legend> <label for="textSelect">Game Players Selector</label> <div id="divDisplay">All Players Place a Finger on Screen<br>Game Starting in 2 sec</div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var gameSelect = document.getElementById("formSelect"); var duration = 2000; var timer; gameSelect.ontouchstart = startEventAction; function startEventAction(event) { timer = setTimeout(function(){ eventAction(event) }, duration); } function endEventAction(event){ if(timer) clearTimeout(timer); eventAction(event); } function eventAction(event) { var players = event.touches.length; divDisplay.textContent = 'Total Players: '+players; gameSelect.removeAttribute('ontouchstart'); gameSelect.removeAttribute('ontouchend'); } </script> </body> </html>
Output
Before touching form element −
After touching form element for 2 seconds −
- Related Questions & Answers
- HTML DOM TouchEvent shiftKey Property
- HTML DOM TouchEvent targetTouches Property
- HTML DOM TouchEvent altKey Property
- HTML DOM TouchEvent ctrlKey Property
- HTML DOM TouchEvent metaKey Property
- HTML DOM TouchEvent Object
- HTML DOM accessKey Property
- HTML DOM activeElement Property
- HTML DOM paddingLeft Property
- HTML DOM id Property
- HTML DOM innerHTML Property
- HTML DOM innerText Property
- HTML DOM readyState Property
- HTML DOM ownerDocument Property
- HTML DOM scrollHeight Property
Advertisements