Common action patterns (click-outside, tooltip) in Svelte - Step-by-Step Execution

Concept Flow - Common action patterns (click-outside, tooltip)

Component mounts

↓

Attach action (click-outside or tooltip)

↓

User interacts

↓

Click outside detected?

Yes→Run outside handler

↓

Do nothing

↓

Hover or focus on element?

Yes→Show tooltip

No↓

Hide tooltip

When the component mounts, it attaches actions like click-outside or tooltip. User interactions trigger checks: clicks outside run handlers, hovers show or hide tooltips.

Execution Sample

Svelte

function clickOutside(node) {
  const handleClick = event => {
    if (!node.contains(event.target)) node.dispatchEvent(new CustomEvent('outclick'));
  };
  document.addEventListener('click', handleClick);
  return { destroy() { document.removeEventListener('click', handleClick); } };
}

This Svelte action detects clicks outside the given element and dispatches an 'outclick' event.

Execution Table

Step	Event	Condition	Action Taken	Output/Event Dispatched
1	Component mounts	Attach clickOutside action	Add document click listener	No event
2	User clicks inside element	event.target inside node?	No action	No event
3	User clicks outside element	event.target outside node?	Dispatch 'outclick' event	'outclick' event dispatched
4	Component unmounts	Remove click listener	Cleanup event listener	No event

💡 Component unmounts and event listener is removed, stopping detection.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
handleClick	undefined	Function assigned	Function active	Function active	Removed on destroy
event.target	undefined	undefined	Inside node	Outside node	undefined
outclick event	Not dispatched	Not dispatched	Not dispatched	Dispatched	Not dispatched after unmount

Key Moments - 2 Insights

Why doesn't clicking inside the element trigger the 'outclick' event?

Because the condition checks if the click target is outside the element (see execution_table step 2). If inside, no event is dispatched.

What happens when the component unmounts?

The event listener is removed to prevent memory leaks and unwanted behavior (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution table, what happens at step 3 when the user clicks outside the element?

A The 'outclick' event is dispatched

B Nothing happens

C The click listener is removed

D The component unmounts

💡 Hint

Check the 'Action Taken' and 'Output/Event Dispatched' columns at step 3

At which step is the click event listener removed?

A Step 1

B Step 2

C Step 4

D Step 3

💡 Hint

Look for the step mentioning component unmount and cleanup

If the user clicks inside the element, what is the output event dispatched?

A 'outclick' event

B No event

C 'click' event

D 'tooltip' event

💡 Hint

Refer to execution_table step 2 under 'Output/Event Dispatched'

Concept Snapshot

Svelte actions like clickOutside detect clicks outside an element.
Attach event listeners on mount and remove on unmount.
Dispatch custom events to notify parent components.
Tooltips show/hide on hover or focus.
Use actions for reusable interactive behavior.

Full Transcript

This visual execution trace shows how a Svelte action detects clicks outside an element. When the component mounts, it adds a click listener on the document. Each click event checks if the click target is outside the element. If yes, it dispatches a custom 'outclick' event. Clicking inside does nothing. When the component unmounts, the listener is removed to clean up. This pattern helps components react to outside clicks, useful for closing menus or dialogs. Tooltips similarly show or hide on hover or focus events using actions.