Posted on by & filed under Content - Highlights and Reviews, Mobile Development, Web Development.

Whenever I develop a web application that targets mobile browsers as much as desktop browsers I find myself confronted with the problem that I have to listen to touch events in the same way I have to listen to click events. This leads to redundant code and a more complex codebase that is harder to understand. For very simple tasks, it’s enough to just use click-events, or any event that is supported by the mobile browser, such as mousedown and mouseup. The problem appears whenever I have more complex interfaces that need to listen to the mouse positions. Additionally, you might have noticed that the usual DOM events (click, mousedown, etc.) are triggered with a little delay on mobile browsers. Sometimes these delays feel awkward and unnatural.

To combat this problem in heavily interactive interfaces, such as online games, I created a little code snippet that maps click and touch events onto a single event. This allows me to listen to one event in the code and cover both mouse events and touch events. Thus, I can listen to one event regardless of if it’s a desktop browser or a mobile browser. Also, through a simple normalization process, I can simplify the access of values like X and Y coordinates of the mouse.

So let’s take a closer look at what I just described:

The events listened to depends upon whether the browser supports touch events or mouse events. If the browser supports touch events, listen to touchstart, touchmove and touchend. Simiarly, if it supports mouse events you should listen to the correlating mouse events. As you might have noticed, in the code above, you listen to the events through the jQuery method, instead of the DOM-node method addEventListener. This is because jQuery already normalizes the events to a certain extent.

I treat every mouse event in the same way. Let’s take a look at what onMouseEvent does.

First, you need to separate what type of event it was. To do this you must define your own type. It can be one of the three TouchMouseEvent types that were defined earlier:

This object is defined globally so it can be used in the entire project to reference the kind of event. These are the same for both touch and mouse events.

Let’s go back to the event listener of the mouse event. In the next step, I normalize the event and actually create a jQuery event by passing the type, the original event, and the pageX and pageY coordinate. The method normalizeEvent returns my event and you can now trigger this event on the node that previously triggered the original event.

Now what happened in the normalizeEvent?

As you can see, it’s very simple. It creates a jQuery Event. It uses the type that was passed. This is one of the TouchMouseEvent types. Additionally it adds pageX, pageY and the originalEvent. Over my last few projects, I found myself using those values so many times, that I included them in the normalizing process.

So far that covers everything for the mouse events. But mouse events alone are not enough. Let’s see what happens in onTouchEvent:

The first part is equal to the onMouseEvent behavior. Next, we need to find the corresponding event type. After this, you get the first touch object representing the first finger. (At this point, I want to add that I only track one touch input since I use touch as a mouse substitute). Once again you normalize the event. This is a little more complicated since the touchend event does not have X and Y coordinates. For this case, just pass null. Like the onMouseEvent method, complete the process by triggering that event on the node that originally triggered the touch event.

If this code is embedded in the project, you can use one event and cover both touch and mouse. You need to make sure to also add jQuery since the code is dependent on it. Anywhere in your project you can then write:

And onUpEvent will be triggered either way.

You can find this snippet of code as a Github gist at: https://gist.github.com/2375726.

Enjoy!

Safari Books Online has the content you need

Check out these great resources available from Safari Books Online:

Whether you need an example-driven programmer’s guide or a complete desk reference, JavaScript: The Definitive Guide is the most authoritative book on the language that runs the Web. This sixth edition offers comprehensive coverage of ECMAScript 5 (the new language standard) and also the new APIs introduced in HTML5.
HTML5 is revolutionizing the way web applications are developed, and HTML5 Canvas puts you right in the middle the action. You’ll learn how to build interactive multimedia applications with HTML5’s Canvas, using this new element to draw, animate, compose images, and more. You’ll also learn the best way to use existing JavaScript libraries, as well as how to incorporate related aspects such as audio and video.

About this author

Mathias Paumgarten, co-author of HTML5 Games Most Wanted, is a web developer who focuses on front-end and interaction development. Starting with a background in Flash development, he now focuses mainly on JavaScript. He found his passion for the web and code-based animation at a very young age and made his way from a small town in Austria all the way to New York City where he currently works for Firstborn Multimedia as a Creative Developer. Part of his work can be found at https://github.com/MathiasPaumgarten and http://www.mathias-paumgarten.com/.

Tags: DOM, Github, Javascript, jQuery, MouseEvent, TouchEvent,

3 Responses to “Mapping Mouse Events and Touch Events Onto a Single Event”

  1. andyvirusuk

    Great post. It certainly in my opinion is the best approach from a commercial perspective as you write more responsive code. I found this while researching for anyone that is interested too

Trackbacks/Pingbacks

  1.  jQuery - Access X and Y coordinates (custom event) - feed99