The `event-tap` module creates a synthetic 'tap' event, that allows for fast-click on touch devices, while supporting mouse events as well.
On touch devices (especially iOS), listening to 'click' events usually results in a 300ms delay, as the browser waits to see if the user executes a double-click. This slight delay can result in a worsened user-experience. This module aims to correct that by providing the synthetic 'tap' event to listen to. By listening to 'tap', application developers can develop against touch events when they are supported, and fall back to pointer-based input devices.
To have access to the `tap` event, you will need to include `event-tap` in your use statement. Optionally, you could include the entire `event` module, although this isn't recommended unless you need all the functionality that `event` provides.
The `tap` synthetic event listens to the following DOM events:
Touch supported | Touch not supported |
---|---|
`touchstart` | `mousedown` |
`touchmove` | `mousemove` |
`touchend` | `mouseup` |
`touchcancel` | `mousecancel` |
The easiest way to use `tap` is to convert your 'click' event listeners to listen for 'tap' instead.
``` node.on("tap", function (event) { this.addClass("tapped"); }); ```Tap allows for fast-clicking on touch devices and reverts to mouse events, so it behaves the same way as 'click' on pointer-based devices.
The `event-tap` module supports event delegation, so you can set up a single event listener to listen for events on all child elements.
``` myParentNode.delegate("tap", function (event) { this.addClass("tapped"); }, 'li a'); ```The `event-tap` module has the following functionality baked in to it: