quicktap implements a class-based replacement for the
:active pseudo-class that doesn't delay on mobile. Elements using quicktap should manifest a noticeable improvement in touch latency.
View the demo page on a mobile device, or watch a video of the differences.
You may notice from the demo page how the regular take longer to respond to presses on the mobile device than the quicktap buttons.
Both Chrome and Firefox have a delay between the
touchstart event and setting the
:active pseudoclass. It is assumed that this is the case to prevent panning or scrolling from causing unintended visual feedback. Unfortunately this sacrifices touch latency even when the user wants to tap on an element.
quicktap gets around this by listening for
touchend events (among others), and toggling an element's class accordingly. This noticeably improves the user experience, since there is almost instant feedback from a user interaction.
$ npm install -S quicktap
const quicktap = ;// or using ES modules;
Apply quicktap enhancements to your chosen element.
Now, the element will have the
.active class when it is pressed.
Applies quicktap enhancements to
elOrEls. This will cause each targeted element to fire an
activate event when pressed and a
deactivate event when released.
options is an object with two optional properties:
string): string to use for active class name instead of
HTMLElement): context to use if
elOrElsis a selector string. Useful for shadow roots (default:
elOrEls may be one of
NodeList (returned by DOM methods such as
Returns all of the elements that have been successfully modified.
// single elementconst elementReference = document;;// eventselementReference;elementReference;// selector;// NodeListconst elementReferences = document;;// arrayconst elementArray =documentdocumentdocument;;// unique class// #target-element will have the 'unique-class' class when pressed;// specified contextconst containerOfButtons = document;;// shadow DOM (after element has been templated)const hostElement = document;;
Returns an object specifying quicktap's version with the following structure:
major: <Number>minor: <Number>patch: <Number>
MIT (see license.txt)