npm install node-touch
Extra touch events and hover behaviour for touch devices.
require('node-touch')();
<div class="touch">Example</div>
In order to use the features, you have to call the module once in the beginning and create the dom elements with the touch
class.
div { ... }
div.hover { ... }
On touch devices, the hover behaviour is quite crappy. With this module, if you use the .hover
class instead of the :hover
pseudoclass, on a touch device the class will be applied when the element is touched on the screen, and on a non-touch device it will act as :hover
. example.
var button = document.createElement('button').
button.classList.add('touch');
document.body.appendChild(button);
button.addEventListener('tap', function (event) {
console.log('Tapped!');
}, false);
You can use the tap
event just as a normal event. It is sort of the touch equivalent of click
.
var div = document.querySelector('div');
div.addEventListener('touchleave', function (event) {
console.log('Left!');
}, false);
The event fires when the finger left the element.
You can add listeners to swipe events. There are three type of swipe events.
div.addEventListener('swipestart', function (event) {});
div.addEventListener('swipemove', function (event) {});
div.addEventListener('swipeend', function (event) {});
The event
object's important properties are:
- direction:
RIGHT
,LEFT
,UP
,DOWN
- delta: how much pixel it moved from the starting touch (relative to the direction)
- startTouch: the starting touch object
- prevTouch: the previous touch object
- changedTouch: the latest touch object
This module sets a global Boolean that just tells you whether the user is on a touch device. It can be useful!