intent-click

Appearance

FAQ ​

What browsers are supported? ​

All browsers with PointerEvent API:

  • Chrome 55+
  • Firefox 59+
  • Safari 13+
  • Edge 12+

IE11 is not supported.

Does it work on desktop? ​

Yes. It detects mouse clicks with threshold: 'auto' (default is 4px on desktop).

What's the difference from fastclick? ​

fastclick is deprecated and only solved 300ms delay on iOS. It doesn't distinguish drag vs click, scroll intent, or ghost clicks. intent-click is built on PointerEvent API and handles all these cases.

Does it break scrolling? ​

No. All listeners are passive by default. Scrolling works normally.

What about touch-action: manipulation? ​

touch-action: manipulation is complementary. Use it to disable double-tap zoom on mobile. intent-click handles the intent detection separately.

How does adaptive threshold work? ​

typescript
// Mouse devices
threshold = 4px * devicePixelRatio

// Touch devices (matchMedia('(hover: none)'))
threshold = 6px * devicePixelRatio

On 3x Retina: 4 * 3 = 12 CSS pixels.

Can I use custom threshold? ​

Yes:

typescript
useIntentClick(callback, { threshold: 10 }); // Fixed 10px

What's a ghost click? ​

On iOS Safari, a "ghost click" fires ~300ms after touchend on the same coordinates. If your UI changed (e.g., modal closed), the ghost click can hit a button underneath. intent-click suppresses clicks within 400ms on coords ±5px.

Does it support Shadow DOM? ​

Yes. Listeners are attached to the element, events bubble within shadow tree. Cross-shadow-boundary detection uses event.composedPath().

What happens on SSR? ​

On server: getSnapshot() returns null, subscribe() is a no-op. All listeners are attached after hydration.