Web TouchEvent API | TouchEvent.changedTouches

The TouchEvent.changedTouches read-only property which is a TouchList. TouchList representing each touchpoint directly involved in this event:
touchstart: A list of touchpoints that become active in touchstart event.
touchmove: A list of touchpoints that have moved during touchmove event.
touchend: A list of touchpoints that become deactivate in touchend event.
touchenter: A list of touchpoints that have entered the touch surface during touchenter event.
touchleave: A list of touchpoints that have exited the touch surface during touchleave event.

Syntax:

var touches = touchEvent.targetTouches;

Return value:
A TouchList listing is returned all the Touch objects for the touchpoints which are still in contact with the surface of the Touch and whose touchstart event occurred inside the same target element like the current target element.



Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html> 
    <head>    
    <title>
        TouchEvent.changedTouches
    </title>
    </head>
<body>
<center> 
<div class="classdiv" id="divID">
<h3> Touch Me! </h3>
</div>
   
<h3 id="statusdiv">Status</h3>
</center>
  
</body>
  
  
<script>
   
window.addEventListener('load', function(){
   
    var divID = document.getElementById('divID')
    var statusdiv = document.getElementById('statusdiv')
    var startx = 0
    var dist = 0
   
    divID.addEventListener('touchstart', function(e){
        var touchobj = e.changedTouches[0]
        startx = parseInt(touchobj.clientX) 
        statusdiv.innerHTML = 'Status: touchstart<br> ClientX: ' + startx + 'px'
        e.preventDefault()
    }, false)
}, false)
   
</script>
</html>                    

chevron_right


Output:
Before touch:

After touch:

Supported Browsers: The browsers supported by TouchEvent.changedTouches are listed below:

  • Google Chrome
  • Firefox
  • Edge
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.