Get the Touch Position with JavaScript

Web Design & Web Development

In this article, I will introduce how to get the touch position with JavaScript.


To get the touch position, you can use the JavaScript Touch.clientX and Touch.clientY property.

Sponsored links


You can get the touch position by touching the screen within the demo range (the origin is at the upper left of the demo range).

Sponsored links



<p class="position">
  X: <span id="x"></span><br>
  Y: <span id="y"></span>


let touchHandler = function(event) {
  let x = 0, y = 0;

  if (event.touches && event.touches[0]) {
      x = event.touches[0].clientX;
      y = event.touches[0].clientY;
  } else if (event.originalEvent && event.originalEvent.changedTouches[0]) {
      x = event.originalEvent.changedTouches[0].clientX;
      y = event.originalEvent.changedTouches[0].clientY;
  } else if (event.clientX && event.clientY) {
      x = event.clientX;
      y = event.clientY;

  document.getElementById('x').innerHTML = x;
  document.getElementById('y').innerHTML = y;

window.addEventListener('touchstart', touchHandler, false);
window.addEventListener('touchmove', touchHandler, false);
window.addEventListener('touchend', touchHandler, false);