Anders Tornblad, web developer

I'm all about the web

Monthly archive for December 2010

Using addTouch to emulate webkit touch events in desktop browser

Testing multitouch code on the iPhone is a bit tedious. I don’t have a Mac, so I don’t have access to the iPhone emulator. I do have a tiny web server installed on my development machine, so I mostly open the project on my iPhone over Wi-Fi using a local IP address. That way I can test my new features instantly, and verify that some bug has been fixed.

This has been enough for simple experiments, but when the code is to be used in a production environment, I really need the debugging capabilities of a modern desktop browser. Mobile Safari does have a developer mode, but that only catches JavaScript exceptions and presents them in a list. I need to be able to set breakpoints, and step through my code in a debugger. I need FireBug, or the Developer Tools of Google Chrome or Internet Explorer 9.

That is why I wrote addTouch. AddTouch started out as a Google Chrome Extension to simulate touch events using the mouse in any web page. Unfortunately, the security model of Google Chrome doesn’t allow me to take over the mouse input completely using an Extension, so instead it is now a JavaScript file to be included before all other JavaScript in the page. It also comes with a CSS stylesheet.

When you visit a touch-enabled web page that includes addTouch.js on an iOS device, nothing out of the ordinary happens. The web page simply works as intended. But when you visit the same web page using any modern desktop browser, adding ?_addTouch=webkit to the URL, all mouse-based interaction is hijacked and turned into touch events that the JavaScript in your web page can handle.

Simply add addTouch.js to your head element before any other javascript is included. Also add the addTouch.css stylesheet.

<html> <head> <script type="text/javascript" src="addTouch.js"></script> <!– Your other scripts here –> <link rel="stylesheet" type="text/css" href="addTouch.css"> </head> <body> <!– Your markup here –> </body> </html>

Here is a demo app:
Without addTouch – visit with iPhone or iPad
With addTouch – visit with any modern desktop browser

This version of addTouch only emulates the raw touchstart, touchmove and touchend events. You will not get any gesture* events. I will probably add gesture emulation in later versions. Also on the “to do” list is support for Mozilla-style touch events like MozTouchDown.

The addTouch project is available on github: /lbrtw/addTouch

Let me know what you think, and if this helps you. NB: addTouch supports pretty much any version of Chrome and Safari. I have only tested it in Firefox 4, but I would be surprised if it didn’t work in Firefox 3.6. For Internet Explorer, you’ll need a recent Platform Preview of IE9.