Toggle navigation

Emulate touch on a desktop

Hammer provides a debug tool to emulate touch support in the browser. It fires DOM touch events as specified by W3C. When pressing the shift key, you can also use multi-touch events like pinch and rotate. You can also use this in other projects without Hammer.js.

How to use

Include the javascript file, and call the Emulator() function before any other libraries that do something with the touch input. It will set some fake properties to spoof the touch detection of some libraries, and triggers touchstart, touchmove and touchend events on the mouse target.

<script src="touch-emulator.js"></script>
<script> TouchEmulator(); </script>
function log(ev) {
 console.log(ev);
}

document.body.addEventListener('touchstart', log, false);
document.body.addEventListener('touchmove', log, false);
document.body.addEventListener('touchend', log, false);

Also, the script includes polyfills for document.createTouch and document.createTouchList.

How it works

It listens to the mousedown, mousemove and mouseup events, and translates them to touch events. If the mouseevent has the shiftKey property to true, it enables multi-touch.

The script also prevents the following mouse events on the page: mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover and mouseup.

Web platform tests

The script has been tested with the w3c web platform tests and passes all tests, except these;

Bookmarklet

javascript:!function(a){var b=a.createElement("script");b.onload=function(){TouchEmulator()},b.src="//cdn.rawgit.com/hammerjs/touchemulator/0.0.2/touch-emulator.js",a.body.appendChild(b)}(document);

Download the script from the repo, or just run bower install hammer-touchemulator.

Edit this page on GitHub