Custom DOM Interactions via Svelte Actions

Snippet

Custom DOM Interactions via Svelte Actions

Actions are elemental-level lifecycle functions. They are perfect for integrating third-party libraries or handling complex DOM events like detecting clicks outside an element for modals or dropdowns.

snippet.js
javascript
export function clickOutside(node, onEvent) {
  const handleClick = (e) => {
    if (node && !node.contains(e.target)) onEvent();
  };
  document.addEventListener('click', handleClick);
  return { destroy: () => document.removeEventListener('click', handleClick) };
}
 
<div use:clickOutside={() => console.log('Closed')}>Content</div>

svelte

Breakdown

export function clickOutside(node, onEvent)

A standard JS function receiving the DOM node and a custom handler.

return { destroy: ... }

Ensures proper cleanup to prevent memory leaks when the element is removed from the DOM.

use:clickOutside={...}

The directive that attaches the logic to a specific HTML element.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Custom DOM Interactions via Svelte Actions

Related