Check if the touch events are supported

True when the browser exposes touch events or reports touch points.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function touchSupported() { return 'ontouchstart' in window || navigator.maxTouchPoints > 0; }

Usage

// Desktop Chromium without a touchscreen:
touchSupported(); // → false
matchMedia('(pointer: coarse)').matches; // → false

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

Know the limits

• Touch support is not touch use: many laptops have both. For layout, the pointer and hover media features describe the primary input, as the last line shows.
• The original also checked DocumentTouch, an obsolete non-standard interface; maxTouchPoints is the standard signal.

The function above is the code the usage lines run. It does not validate its arguments; add checks where it receives untrusted input.

Keep exploring

• Check if a given DOMRect is contained within another DOMRect — True when the target lies inside the container or on its edges.
• Check if two DOMRects intersect — Two rects intersect when they meet on both axes.
• Compare two DOMRects for size and position match — Compare x, y, width and height exactly.