Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hammerjs/touchemulator
Emulate touch input on your desktop
https://github.com/hammerjs/touchemulator
Last synced: 1 day ago
JSON representation
Emulate touch input on your desktop
- Host: GitHub
- URL: https://github.com/hammerjs/touchemulator
- Owner: hammerjs
- License: mit
- Created: 2014-07-20T12:22:20.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-11-17T03:11:38.000Z (almost 2 years ago)
- Last Synced: 2024-10-10T12:13:28.383Z (29 days ago)
- Language: JavaScript
- Homepage: http://hammerjs.github.io/touch-emulator
- Size: 59.6 KB
- Stars: 381
- Watchers: 11
- Forks: 110
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-star - touchemulator
- awesome-javascript - touchemulator - Emulate touch input on your desktop - ★ 200 (Gesture)
README
Touch Emulator
========
Emulate multi-touch input on your desktop. Triggers touch events as
[specified by W3C](http://www.w3.org/TR/touch-events). Press the `shift` key to pinch and rotate!
- [Example with Hammer.js](http://rawgit.com/hammerjs/touchemulator/master/tests/manual/hammer.html)
- [Example with Leaflet Maps](http://rawgit.com/hammerjs/touchemulator/master/tests/manual/leaflet.html)
- [View webpage](http://hammerjs.github.io/touch-emulator)
## Install
Download the script from this repo, via Bower:
```bash
bower install hammer-touchemulator
```
or NPM:
```bash
npm install hammer-touchemulator
```
## 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.
````html
TouchEmulator();
````
````js
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](/tests/web-platform-tests/touch-events) and passes all tests, except these;
- *assert_true: event is a TouchEvent event expected true got false*
- We trigger an event of the type `Event`
- *assert_equals: touch list is of type TouchList expected "[object TouchList]" but got "[object Array]"*
- *assert_equals: touch is of type Touch expected "[object Touch]" but got "[object Object]"*
## Bookmarklet
````js
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);
````
## Options
#### TouchEmulator.template = Function(touch)
Change the css properties of the rendered touches.
#### TouchEmulator.multiTouchOffset = 75
The distance between the two touch points when entering the *multi-touch zone*.
#### TouchEmulator.ignoreTags = [...]
The names of HTML tags that shouldn't swallow mouse events (default: `['TEXTAREA', 'INPUT']`).