Detect Passive Events

Detects if the browser supports passive event listeners. Tree-shakable and side-effect free. Also available as part of detect-it.

Live detection test

Note that the code used in the detection is adapted from this Passive Events Explainer.

Using detect-passive-events

npm install --save detect-passive-events

// supportsPassiveEvents is a boolean
import { supportsPassiveEvents } from 'detect-passive-events';

if (supportsPassiveEvents) {
  // passive events are supported by the browser
  document.addEventListener('scroll', handleScroll, { capture: false, passive: true });
} else {
  // passive events are not supported by the browser
  document.addEventListener('scroll', handleScroll, false);
}

Or use the script directly in the browser

Optionally, instead using npm install you can the load the script directly in the browser. A minified UMD version is available from Unpkg for this purpose.

<script src="https://unpkg.com/detect-passive-events@2/dist/detect-passive-events.umd.production.js"></script>

// it will be available on the window as DetectPassiveEvents
if (window.DetectPassiveEvents.supportsPassiveEvents) {
  document.addEventListener('scroll', handleScroll, { capture: false, passive: true });
} else {
  document.addEventListener('scroll', handleScroll, false);
}