A brief background
Today, almost all popular browsers have already adopted the specification, with the exception of Internet Explorer and Safari.
- 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.
- 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
That is, browsers dispatched the
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
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.
touchcancel, in addition to the three interfaces that go into building any touch interaction i.e.
Many many programs will be created followed by two fairly difficult exercises to test your understanding of the basics.
TouchList interface, we'll discover all the three properties of a touch event object, each of which represents a
TouchList instance i.e.
We'll explore the difference between these three objects and then, as always, create real programs to test the features extensively.
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.
They are extremely powerful, well-supported and easy to use. Likewise, it's time to start learning how to work with them.