Emulate WebKit touch events using addTouch

Written by Anders Marzi Tornblad 22 December 2010

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 in Xcode. 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 emulate 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 in any web page. It also comes with a CSS stylesheet.

When you visit a touch-enabled web page that includes addTouch.json 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 and addTouch.css to the <head> of your web page, and you can test your touch-enabled web page in any modern desktop browser.

<html>
  <head>
    script type="text/javascript" src="addTouch.js"></script>
    <link rel="stylesheet" type="text/css" href="addTouch.css"/>
  </head>
  <body>
    ...
  </body>
</html>

This version of addTouch only emulates the raw touchstart, touchmove, and touchend events. It does not emulate any of the gesture* events, nor does it emulate the click event. Also on the "TO DO" list is to add support for Mozilla-style touch events like MozTouchDown and MozTouchMove.

Conclusion

Please let me know what you think, and if addTouch helps you. Note that addTouch supports almost 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 will need a recent Platform Preview version of IE9.

The latest version of the code is always available in the GitHub repository.