OutsideClick.js

Detect pointer events outside a DOM element. Zero dependencies, SSR-safe, ESM + CJS.

Installation

pnpm add @kembec/outside-click-js

Usage

import { outsideClick } from "@kembec/outside-click-js";

const cancel = outsideClick("my-dropdown", () => {
  console.log("clicked outside");
});

cancel();

outsideClick("my-modal", closeModal, { timeout: 100 });

const controller = new AbortController();
outsideClick("my-menu", closeMenu, { signal: controller.signal });
controller.abort();

const el = document.querySelector("#panel")!;
outsideClick(el, handleOutside);

API

outsideClick(
  target: string | HTMLElement,
  onOutsideClick: () => void,
  options?: { timeout?: number; signal?: AbortSignal }
): () => void

• target — element ID string or HTMLElement reference
• onOutsideClick — called once on the first pointerdown outside target
• options.timeout — ms to wait before attaching the listener (default 0)
• options.signal — AbortSignal to cancel the listener externally
• Returns a cancel() function — call it to remove the listener before it fires

Migration from v1

| v1 | v2 | |---|---| | outsideClick('id', cb, 500) | outsideClick('id', cb, { timeout: 500 }) | | Return value was void | Now returns () => void (cleanup) |

License

AGPL-3.0