Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 targetTouches Property
The HTML DOM TouchEvent targetTouches 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 only count if they are also triggered on the same node.
Following is the syntax −
Returning TouchList object
event.targetTouches
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 targetTouches property −
Example
<!DOCTYPE html>
<html>
<head>
<title>TouchEvent targetTouches</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-targetTouches</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.targetTouches.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 −
Updated on: 29-Oct-2019
101 Views
Advertisements