Click Outside directive #svelte #typescript #directive

click-outside.ts

export default function clickOutside(node: HTMLElement) {
	const handleClick = (event: MouseEvent) => {
		if (!node.contains(event.target as Node)) {
			node.dispatchEvent(new CustomEvent('outsideclick'));
		}
	};

	// The node has been mounted to the DOM
	window.addEventListener('click', handleClick);

	return {
		destroy() {
			// The node has been removed from the DOM
			window.removeEventListener('click', handleClick);
		},
	};
}