Mobile Web Specialist Series: Touch Events.

Following the process to train me for the mws exam, I continue with the next topic: Touch Events, the material shown below it’s taken from MDN docs.

The touch events are the low level API to use for implement multi-touch behavior in a web site, the multi-touch iteration starts when a finger first touches the contact surface. Other fingers can subsequently touch the surface and move around it. This interaction ends when the fingers are removed from the surface, during this interaction an app receives the touch event from the start, move and end phases.

The TouchEvent interface encapsulates all of the touch points that are currently active.

The Touch interface, which represents a single touch point, this includes the position of the touch point relative to the browser screen.

The TouchList interface which represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time it’s like a data stream.

There were no more concepts to explain we’re going to the best part, let’s code 😎

Create the <canvas> element

Create the index.html file and add a canvas element, and create a <button> calling to startup() function which we see later, and add a <pre> element where we go to see the log of the touch event.

In the main.js file we start to init a ongoingTouches variable with a empty array:

const ongoingTouches = [];

startup() function (set the event handlers)

The startup() function sets all the event listeners for our <canvas> of this way we can handle the touch events that happen inside it:

Start to tracking touches

The first function that we have to define it’s the handler for touchstartevent we named hanldeStart :

This calls event.preventDefault()to keep the browser from continuing to process the touch event and prevents a mouse event being delivered, get the canvas context and pull the list of changed touch points out of the event’s TouchEvent.changedTouches property, after we iterate over all the touches array pushing them onto ongoingTouches and drawing the start point for the draw as a small circle.

Drawing the move event

With each move of the fingers a touchmove event is delivered, this called our handleMove() function, Its responsibility in this example is to update the cached touch information and to draw a line from the previous position to the current position of each touch:

In this function we iterate over touches array, but it looks in our cached touch information array for the previous information about each touch in order to determine the starting point for each touch’s new line segment to be drawn. This is done by looking at each touch’s Touch.identifier property.

This lets us get the coordinates of the previous position of each touch and use the context methods to draw a line segment between two points.

Finally we call the ongoingTouches.splice to replace the previous information about the touch point with the current information.

Handle the end event

This is delivered when the user lifts a finger off the surface, a touchend event is triggered, for this we call the handleEnd(), Its job is to draw the last line segment for each touch that ended and remove the touch point from the ongoingTouches array:

It’s very similar to the handleMove() below, the unique difference is that we draw a small square to mark the end and that when we call ongoingTouches.splice(), we remove the old entry from the ongoing touch list.

And handle the cancel events

If the user’s finger enters in the surface, or the touch otherwise needs to be canceled, the touchcancel event is sent, and we call the handelCancel() :

Since the idea is to immediately abort the touch, we simply remove it from the ongoingTouches without drawing a final line segment.

Utils functions

This example use a several utility functions that I will describe below

Select a color for each touch event

In order to make each touch’s drawing look different, the colorForTouch() function is used to pick a color based on the touch's unique identifier:

Copy a touch object

Some browsers (mobile Safari, for one) re-use touch objects between events, so it’s best to copy the bits you care about, rather than referencing the entire object:

Find an item inside to oungoingTouch array

The ongoingTouchIndexById() function below scans through the ongoingTouches array to find the touch matching the given identifier, then returns that touch's index into the array:

And Log everything

You can see this example working live here, and the complete source code in my Github repo.

Note: the live example only works in browser with touch support, if you’re on chrome you should be toggle to device mode so that it works correctly.

Not being more, until the next post of Mobile Web Specialist Series, thanks for reading 😬.