FastClick is a simple, easy-to-use polyfill library that eliminates the 300ms delay between a physical tap and the firing of a click event on mobile browsers. It makes web applications feel more responsive on touch devices by detecting touch events and immediately firing synthetic click events, then suppressing the browser's delayed click events.
npm install fastclick// Note: ES6 import may not work directly with this UMD module
// Use CommonJS or AMD patterns instead
const FastClick = require("fastclick").FastClick;For CommonJS:
const FastClick = require("fastclick");Alternative CommonJS pattern (recommended):
const attachFastClick = require("fastclick");For AMD:
require(["fastclick"], function(FastClick) {
// Use FastClick constructor
});// Recommended approach using factory method
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
// With jQuery
$(function() {
FastClick.attach(document.body);
});
// CommonJS shorthand pattern
const attachFastClick = require("fastclick");
attachFastClick(document.body);
// With options
FastClick.attach(document.body, {
touchBoundary: 20,
tapDelay: 100
});Creates a new FastClick instance and attaches event listeners to the specified DOM element.
/**
* Instantiate fast-clicking listeners on the specified layer
* @param {Element} layer - The layer to listen on
* @param {FastClickOptions} [options] - Optional configuration
*/
function FastClick(layer, options);Factory method for creating FastClick instances. This is the recommended way to use FastClick.
/**
* Factory method for creating a FastClick object
* @param {Element} layer - The layer to listen on
* @param {FastClickOptions} [options] - Optional configuration
* @returns {FastClick} FastClick instance
*/
FastClick.attach(layer, options);Determines whether FastClick is needed for the current browser and element.
/**
* Check whether FastClick is needed
* @param {Element} layer - The layer to check
* @returns {boolean} True if FastClick is not needed
*/
FastClick.notNeeded(layer);Removes all FastClick event listeners from the layer.
/**
* Remove all FastClick's event listeners
* @returns {void}
*/
destroy();Determines whether a given element requires a native click event.
/**
* Determine whether a given element requires a native click
* @param {EventTarget|Element} target - Target DOM element
* @returns {boolean} True if the element needs a native click
*/
needsClick(target);Determines whether a given element requires focus to simulate a click.
/**
* Determine whether a given element requires focus for click simulation
* @param {EventTarget|Element} target - Target DOM element
* @returns {boolean} True if the element requires focus
*/
needsFocus(target);Sends a synthetic click event to the specified element.
/**
* Send a click event to the specified element
* @param {EventTarget|Element} targetElement - Target element
* @param {Event} event - Original touch event
* @returns {void}
*/
sendClick(targetElement, event);Focuses the target element with mobile-specific handling.
/**
* Focus the target element with mobile-specific handling
* @param {EventTarget|Element} targetElement - Element to focus
* @returns {void}
*/
focus(targetElement);Updates scroll parent tracking for the given target element.
/**
* Check and update the scroll parent for a target element
* @param {EventTarget|Element} targetElement - Element to check
* @returns {void}
*/
updateScrollParent(targetElement);Resolves the actual target element from an event target, handling text nodes.
/**
* Get target element from event target, handling text nodes
* @param {EventTarget} eventTarget - Event target from touch event
* @returns {Element|EventTarget} Resolved target element
*/
getTargetElementFromEventTarget(eventTarget);Checks whether the touch has moved past the boundary since it started.
/**
* Check if touch has moved beyond the boundary
* @param {Event} event - Touch event
* @returns {boolean} True if touch moved past boundary
*/
touchHasMoved(event);Finds the associated control element for a given label element.
/**
* Find the labelled control for a given label element
* @param {EventTarget|HTMLLabelElement} labelElement - Label element
* @returns {Element|null} Associated control element or null
*/
findControl(labelElement);Determines the appropriate event type for synthetic events based on the target.
/**
* Determine event type for synthetic events
* @param {EventTarget|Element} targetElement - Target element
* @returns {string} Event type ('click' or 'mousedown')
*/
determineEventType(targetElement);FastClick instances include several event handler methods that are automatically bound:
/**
* Handle touch start events
* @param {Event} event - Touch start event
* @returns {boolean} Whether to continue event processing
*/
onTouchStart(event);
/**
* Handle touch move events
* @param {Event} event - Touch move event
* @returns {boolean} Whether to continue event processing
*/
onTouchMove(event);
/**
* Handle touch end events
* @param {Event} event - Touch end event
* @returns {boolean} Whether to continue event processing
*/
onTouchEnd(event);
/**
* Handle touch cancel events
* @returns {void}
*/
onTouchCancel();
/**
* Handle mouse events and determine if they should be permitted
* @param {Event} event - Mouse event
* @returns {boolean} Whether to permit the event
*/
onMouse(event);
/**
* Handle click events and determine if they should be permitted
* @param {Event} event - Click event
* @returns {boolean} Whether to permit the event
*/
onClick(event);FastClick respects certain CSS classes to control its behavior:
<!-- This element will receive native clicks -->
<a class="needsclick" href="/example">Native Click Link</a>
<!-- This element will receive focus handling -->
<input class="needsfocus" type="text" placeholder="Focus handling">/**
* Configuration options for FastClick
*/
interface FastClickOptions {
/** Distance in pixels beyond which a click will be cancelled (default: 10) */
touchBoundary?: number;
/** Minimum time in milliseconds between tap events (default: 200) */
tapDelay?: number;
/** Maximum time in milliseconds for a tap gesture (default: 700) */
tapTimeout?: number;
}
/**
* FastClick instance with all methods and properties
*/
interface FastClick {
// Instance properties
/** Whether a click is currently being tracked */
trackingClick: boolean;
/** Timestamp for when click tracking started */
trackingClickStart: number;
/** The element being tracked for a click */
targetElement: EventTarget | null;
/** X-coordinate of touch start event */
touchStartX: number;
/** Y-coordinate of touch start event */
touchStartY: number;
/** ID of the last touch */
lastTouchIdentifier: number;
/** Touch movement boundary */
touchBoundary: number;
/** The FastClick layer element */
layer: Element;
/** Minimum time between tap events */
tapDelay: number;
/** Maximum time for a tap */
tapTimeout: number;
/** Timestamp of last click event */
lastClickTime: number;
/** Flag to cancel the next click */
cancelNextClick: boolean;
// Methods (as documented above)
destroy(): void;
needsClick(target: EventTarget | Element): boolean;
needsFocus(target: EventTarget | Element): boolean;
sendClick(targetElement: EventTarget | Element, event: Event): void;
focus(targetElement: EventTarget | Element): void;
updateScrollParent(targetElement: EventTarget | Element): void;
getTargetElementFromEventTarget(eventTarget: EventTarget): Element | EventTarget;
touchHasMoved(event: Event): boolean;
findControl(labelElement: EventTarget | HTMLLabelElement): Element | null;
determineEventType(targetElement: EventTarget | Element): string;
onTouchStart(event: Event): boolean;
onTouchMove(event: Event): boolean;
onTouchEnd(event: Event): boolean;
onTouchCancel(): void;
onMouse(event: Event): boolean;
onClick(event: Event): boolean;
}FastClick automatically detects when it's not needed and avoids attaching listeners in these cases:
width=device-width viewport meta taguser-scalable=no viewport meta tagtouch-action: manipulation CSS propertyFastClick supports multiple module systems:
module.exports is set to FastClick.attach functionmodule.exports.FastClick provides access to the constructorFastClick constructor (not the attach function)FastClick constructor to window.FastClickFastClick is designed to fail gracefully. If any errors occur during touch event processing, the library will typically fall back to allowing normal browser behavior rather than blocking user interactions.