Mouse event to touch event mapping for testing touch interfaces with desktop browsers. This means that touchstart, touchmove, and touchend are hooked up to mousedown, mousemove, and mouseend, respectively. This is generally recommended for testing purposes.

Inspired by Phantom Limb (https://github.com/brian-c/phantom-limb), but seeking less bloat (no graphics) and more conformance to the properties of actual touch objects.

http://davidbcalhoun.com/a/touche.html

Try it in your desktop browser!

You hook up events just like you would on a device (libraries will use the same methods):

document.addEventListener('touchstart', function(e){}, false);
document.addEventListener('touchmove', function(e){}, false);
document.addEventListener('touchend', function(e){}, false);

The main difference with touch events are the touch event arrays, which Touché gladly simulates for you:

1. touchstart has e.touches
2. touchmove has e.touches and e.changedTouches
3. touchend has e.changedTouches

Because a mouse cursor is representative of just one finger, these simulated arrays will only contain one element (i.e. e.touches[0]) corresponding to one touch.

Example:

document.addEventListener('touchstart', function(e){
	e.touches[0].target;   // example: "[object HTMLPreElement]"
	e.touches[0].screenX;
	e.touches[0].screenY;
}, false);

Tested to work on:

1. Chrome 13+
2. Safari 5.1+
3. Firefox 7+