JavaScript Touch Interface

In the last chapter, JavaScript Touch Events — The TouchList Interface, we got to know about the TouchList interface which is used to obtain a list of all the touch points associated with the current event. Each element of this list is a Touch instance containing information regarding the underlying touch point.

This chapter aims to explore the Touch interface which is the core of working with touch events in JavaScript. It is what's used to obtain such useful information as the x and y co-ordinates of the touch point, the unique identifier associated with it, or simply the target element where it initially hit the touch surface.

As always, we'll consider a couple of examples to help illustrate everything. Let's begin.

The first and foremost thing is to understand the Touch interface on its own. That is, why do we even need it.

As we stated in the last chapter, a touch event is not the same thing as, let's say, a mouse event. There are typically multiple points of interaction to consider in a touch event contrary to a mouse event in which there is only one interaction point and that is the mouse pointer.

Likewise, we need a list to represent all the involved touch points.

And we know already that this list is an instance of the TouchList interface. Now, inside this list, each element simply denotes a given touch point — it encapsulates all the information that we are usually interested in while working with touch events such as the co-ordinates of the point.

Each element is an instance of the Touch interface.

Here are some of the properties of Touch:

1. clientX / clientY — the x and y co-ordinates of the touch point relative to the browser viewport.
2. pageX / pageY — the x and y co-ordinates of the touch point relative to the HTML page.
3. screenX / screenY — the x and y co-ordinates of the touch point relative to the device's screen.
4. identifier — a unique number assigned to each touch point to identify it.
5. target — the element in which the touch point came into contact with the touch surface.

Let's now see each of these properties one-by-one.

To obtain the co-ordinates of the touch point, we use the clientX / clientY, pageX / pageY, and screenX / screenY properties.

The behavior of each of these pairs of properties, as detailed above, is essentially the same as their behavior in a MouseEvent object.

Time to take a look at an example.

In the code below, we demonstrate all of these with our old #touch-region element:

<div id="touch-region"></div>

<div><code>clientX: <b class="output">-</b></code>, <code>clientY: <b class="output">-</b></code></div>
<div><code>pageX: <b class="output">-</b></code>, <code>pageY: <b class="output">-</b></code></div>
<div><code>screenX: <b class="output">-</b></code>, <code>screenY: <b class="output">-</b></code></div>

var touchRegionElement = document.getElementById('touch-region');
var outputElementList = document.getElementsByClassName('output');

function showCoordinates(e) {
   e.preventDefault();
   outputElementList[0].innerText = e.changedTouches[0].clientX;
   outputElementList[1].innerText = e.changedTouches[0].clientY;
   outputElementList[2].innerText = e.changedTouches[0].pageX;
   outputElementList[3].innerText = e.changedTouches[0].pageY;
   outputElementList[4].innerText = e.changedTouches[0].screenX;
   outputElementList[5].innerText = e.changedTouches[0].screenY;
}

touchRegionElement.addEventListener('touchstart', showCoordinates);
touchRegionElement.addEventListener('touchmove', showCoordinates);
touchRegionElement.addEventListener('touchend', showCoordinates);

Here's a live example:

Live Example

Perfect.

One particularly handy property available on a Touch object is identifier.

It simply is a unique number assigned to each and every touch point right at the instance when it makes contact with the touch surface.

identifier begins at 0 and increments by 1 with every new touch point. We can use this property to track each and every point individually on the touch surface.

Here's a simple example:

In the code below, we have set up a simple program to output the currently fired touch event along with a table row for each of the touch points in touches. For each touch point, we output its clientX and clientY co-ordinates and identifier property.

<div id="touch-region"></div><br>

<table>
   <tr>
      <th><code>clientX</code></th>
      <th><code>clientY</code></th>
      <th><code>identifier</code></th>
   </tr>
</table>

var touchRegionElement = document.getElementById('touch-region');
var tableElement = document.querySelector('table');
var tableElementInnerHTML = tableElement.innerHTML;

function showInfo(e) {
   e.preventDefault();
   var innerHTML = tableElementInnerHTML;

   var touch;
   for (var i = 0; i < e.touches.length; i++) {
      touch = e.touches[i];
      innerHTML = innerHTML + `<tr>
         <td>${touch.clientX}</td>
         <td>${touch.clientY}</td>
         <td>${touch.identifier}</td>
      </tr>`;
   }

   tableElement.innerHTML = innerHTML;
}

touchRegionElement.addEventListener('touchstart', showInfo);
touchRegionElement.addEventListener('touchmove', showInfo);
touchRegionElement.addEventListener('touchend', showInfo);

The reason of the variable tableElementInnerHTML is to save the initial HTML of the <table> element so that it can be used when creating the full innerHTML of tableElement later on inside the showInfo() handler.

Let's try it out:

Live Example