node-touch

node-touch

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.

hover

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.

tap

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.

touchleave

var div = document.querySelector('div');
 
div.addEventListener('touchleave', function (event) {
  console.log('Left!');
}, false);

The event fires when the finger left the element.

swipe

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

window.isTouchDevice

This module sets a global Boolean that just tells you whether the user is on a touch device. It can be useful!