JavaScript: Touch Events — Introduction

JavaScript Touch Events

Learning outcomes:

  • A brief background of touch events
  • Limitations of emulating mouse events
  • What we'll cover in this unit

A brief background

When JavaScript first emerged in 1995, it wasn't conceived that in the coming years it would be used such sophisticatedly as it is used today.

Over the decades, more and more features have been added to JavaScript and as a result, now the language as across web browser software, is extremely powerful, efficient and mature.

If we trace back in time, JavaScript didn't have support for touch events from the very beginning. In fact, even touch devices weren't as readily available back then as they are today; let alone the idea of handling touch gestures.

As time went on, owing to the increasing adoption of touch-based devices, the increasing percentages of web users coming from them, and the desire to strengthen JavaScript by providing almost all features that an end programmer will benefit from, came in the suggestion of adding support for touch events into the language.

Apple was the pioneer of this idea. With the release of iOS 2.0, developers at Apple added the whole ecosystem to work with touch events in the browser through JavaScript. Soon, Android followed along as well.

And finally, as with any good idea for a web technology that's already adopted across many platforms, the W3C (World Wide Web Consortium) began working on drafting a standard for touch events in JavaScript. The latest formal specification was published back in October 2013, entitled Touch Events - W3C.

Today, almost all popular browsers have already adopted the specification, with the exception of Internet Explorer and Safari.

  1. Internet Explorer supports a much more generalized interface for working with touch events, mouse events and other pointer events. It's called the Pointer Events API, which is also a W3C standard.
  2. Safari for Desktop doesn't support touch events, even on touch-based devices, to ensure the best user experience via mouse events on the devices.

Nonetheless, the API has extremely good support across many of the mainstream desktop browsers and almost all mobile browsers.

Hence, what we're about to explore throughout this unit is all about a well-supported technology that's useful in many ways for devices having touch support.

Limitations of emulating mouse events

Before the advent of touch events in JavaScript, touch-based interactions on touch devices were totally performed via mouse events.

That is, browsers dispatched the mousedown, mouseup and click events on touch interactions.

And this exists to date. But why?

The reason for emulating mouse events via touch interactions on browsers, even as of today, is very simple — no one wants his/her website, made with mouse interaction in mind, to completely cease from working on a touch device!

Anyways, coming back to the main idea, as you might've guessed, this emulation approach had its limitations.

For instance, there was no way to track the movement of the finger across the screen, as such an interaction didn't trigger mousemove. Furthermore, mousedown and mouseup behaved just like click, firing all together when the finger was raised off from the screen.

To add to the problems, devices with multitouch support couldn't be used to their full potential i.e only one finger could be used in the emulated interaction. This was because mouse events just weren't made with touch devices in mind; rather they were made with the mouse pointer in mind, which could only be one in number.

Hence, it soon became clear that to enable fluid interactions across touch devices, an API was required other than the mouse events API to provide direct access to information resulting from the touch screen.

Now with the touch events API supported across major browsers, it becomes even more important for us developers to truly understand it and start extracting its essence on touch devices.

In this unit

Alright, let's now talk about what we'll explore in this unit.

We'll start with the very basics of handling touch events in JavaScript in the next chapter, JavaScript Touch Events — Basics. Here, we'll explore the four standard events i.e. touchstart, touchmove, touchend and touchcancel, in addition to the three interfaces that go into building any touch interaction i.e. TouchEvent, TouchList and Touch.

Many many programs will be created followed by two fairly difficult exercises to test your understanding of the basics.

In the third chapter JavaScript Touch Events — The TouchList interface, we'll discover all the three properties of a touch event object, each of which represents a TouchList instance i.e. touches, changedTouched and targetTouches.

We'll explore the difference between these three objects and then, as always, create real programs to test the features extensively.

In the final chapter JavaScript Touch Events — The Touch interface, we'll explore the Touch interface that represents a given touch point. This interface is used to obtain the co-ordinates of any given touch point, hence the whole chapter would be really helpful in understanding touch events to their very core.

With the units quiz, JavaScript Touch Events — Quiz, we'll make sure that we understand each and every single bit of detail sprinkled throughout the whole unit, especially in the first two chapters.

So this is it for a warm introduction to touch events in JavaScript.

They are extremely powerful, well-supported and easy to use. Likewise, it's time to start learning how to work with them.

Ready?