Event modifiers (preventDefault, stopPropagation) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when clicking the button with preventDefault modifier?

Consider this Svelte component:

<script>
  let clicked = false;
  function handleClick(event) {
    clicked = true;
  }
</script>

<form on:submit|preventDefault={handleClick}>
  <button type="submit">Submit</button>
</form>

<p>Clicked: {clicked}</p>

What will be the value of clicked after clicking the button?

Svelte

<script>
  let clicked = false;
  function handleClick(event) {
    clicked = true;
  }
</script>

<form on:submit|preventDefault={handleClick}>
  <button type="submit">Submit</button>
</form>

<p>Clicked: {clicked}</p>

A clicked becomes true and the form does NOT reload the page.

B clicked remains false and the form reloads the page.

C clicked becomes true and the form reloads the page.

D clicked remains false and the form does NOT reload the page.

💡 Hint

Remember, preventDefault stops the browser's default action like page reload on form submit.

The preventDefault modifier stops the form from reloading the page. The handleClick function runs, setting clicked to true. So, the page stays, and the text updates.

❓ component_behavior

intermediate

How does stopPropagation affect nested click events?

Given this Svelte component:

<script>
  let outerClicked = false;
  let innerClicked = false;
  function outer() { outerClicked = true; }
  function inner() { innerClicked = true; }
</script>

<div on:click={outer} style="padding: 20px; background: lightblue;">
  Outer Div
  <button on:click|stopPropagation={inner}>Click Me</button>
</div>

<p>Outer clicked: {outerClicked}</p>
<p>Inner clicked: {innerClicked}</p>

What happens when the button is clicked?

Svelte

<script>
  let outerClicked = false;
  let innerClicked = false;
  function outer() { outerClicked = true; }
  function inner() { innerClicked = true; }
</script>

<div on:click={outer} style="padding: 20px; background: lightblue;">
  Outer Div
  <button on:click|stopPropagation={inner}>Click Me</button>
</div>

<p>Outer clicked: {outerClicked}</p>
<p>Inner clicked: {innerClicked}</p>

A Neither innerClicked nor outerClicked become true.

B Both innerClicked and outerClicked become true.

C Only outerClicked becomes true; innerClicked remains false.

D Only innerClicked becomes true; outerClicked remains false.

💡 Hint

Think about what stopPropagation does to event bubbling.

The stopPropagation modifier stops the click event from bubbling up to the outer div. So, only innerClicked becomes true, and outerClicked stays false.

📝 Syntax

advanced

Which option correctly uses both preventDefault and stopPropagation modifiers?

Choose the Svelte event binding that correctly applies both preventDefault and stopPropagation to a click event.

A <button on:click|preventDefault|stopPropagation={handleClick}>Click</button>

B <button on:click|stopPropagation|preventDefault={handleClick}>Click</button>

C <button on:click={handleClick|preventDefault|stopPropagation}>Click</button>

D <button on:click|preventDefault={handleClick}|stopPropagation>Click</button>

💡 Hint

Modifiers are chained with pipes | before the handler function.

Option A correctly chains modifiers before the handler. Option A is valid syntax but order matters in Svelte; preventDefault should come before stopPropagation for expected behavior. Option A and D are invalid syntax.

🔧 Debug

advanced

Why does stopPropagation not work as expected in this code?

Look at this Svelte snippet:

<script>
  let count = 0;
  function parentClick() { count += 1; }
  function childClick(event) {
    event.stopPropagation();
    count += 10;
  }
</script>

<div on:click={parentClick}>
  <button on:click={childClick}>Add</button>
</div>

<p>Count: {count}</p>

Clicking the button increases count by 11. Why?

Svelte

<script>
  let count = 0;
  function parentClick() { count += 1; }
  function childClick(event) {
    event.stopPropagation();
    count += 10;
  }
</script>

<div on:click={parentClick}>
  <button on:click={childClick}>Add</button>
</div>

<p>Count: {count}</p>

A The event object is undefined, so stopPropagation does nothing.

B The parentClick function is called manually inside childClick.

C stopPropagation is called too late; Svelte modifiers are needed to stop bubbling.

D The button's default action triggers parentClick despite stopPropagation.

💡 Hint

Consider how Svelte event modifiers differ from manual event methods.

In Svelte, using event.stopPropagation() inside a handler may not prevent Svelte's internal event handling order. Using the |stopPropagation modifier ensures Svelte stops the event at the right time. Here, the manual call is too late, so parentClick still runs.

🧠 Conceptual

expert

What is the combined effect of preventDefault and stopPropagation modifiers on a link click?

Consider this Svelte code:

<a href="https://example.com" on:click|preventDefault|stopPropagation={handleClick}>Go</a>

What happens when the link is clicked?

Svelte

<a href="https://example.com" on:click|preventDefault|stopPropagation={handleClick}>Go</a>

A The browser navigates to the link, but parent click handlers do NOT run.

B The browser does NOT navigate to the link, and no parent click handlers run.

C The browser does NOT navigate to the link, but parent click handlers still run.

D The browser navigates to the link, and parent click handlers run.

💡 Hint

Think about what each modifier stops.

preventDefault stops the browser's default navigation. stopPropagation stops the event from bubbling up to parent elements. So, the link does not navigate, and no parent click handlers run.

Practice

1. What does the preventDefault event modifier do in Svelte?

easy

A. It delays the event handler execution.

B. It stops the event from bubbling up to parent elements.

C. It stops the browser's default action for the event.

D. It duplicates the event on child elements.

Solution

1. Step 1: Understand preventDefault purpose

   The preventDefault modifier stops the browser's default behavior, like following a link or submitting a form.

2. Step 2: Compare with other modifiers

   stopPropagation stops event bubbling, not default actions. The other options describe unrelated behaviors.

3. Final Answer:

   It stops the browser's default action for the event. -> Option C

4. Quick Check:

   preventDefault = stops default browser action [OK]

Hint: preventDefault stops browser default actions like clicks [OK]

Common Mistakes:

• Confusing preventDefault with stopPropagation
• Thinking it delays event handling
• Assuming it affects child elements

2. Which of the following is the correct syntax to prevent the default form submission in Svelte?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall Svelte event modifier syntax

   Svelte uses the pipe symbol | to add modifiers like preventDefault after the event name.

2. Step 2: Identify correct syntax

   correctly uses on:submit|preventDefault. uses wrong modifier, C uses dot instead of pipe, D uses incomplete modifier.

3. Final Answer:

   <form on:submit|preventDefault={handleSubmit}> -> Option D

4. Quick Check:

   Use pipe (|) for modifiers like preventDefault [OK]

Hint: Use pipe (|) after event name for modifiers [OK]

Common Mistakes:

• Using dot (.) instead of pipe (|) for modifiers
• Mixing preventDefault with stopPropagation
• Omitting the modifier entirely

3. Consider this Svelte code snippet:

<button on:click|stopPropagation={handleClick}>Click me</button>
function handleClick() {
  alert('Button clicked');
}
document.body.addEventListener('click', () => alert('Body clicked'));

What happens when the button is clicked?

medium

A. Only 'Button clicked' alert shows; 'Body clicked' is blocked.

B. Both alerts 'Button clicked' and 'Body clicked' show.

C. Only 'Body clicked' alert shows; button click is ignored.

D. No alerts show because event is stopped.

Solution

1. Step 1: Understand stopPropagation effect

   The stopPropagation modifier stops the event from bubbling up to parent elements like document.body.

2. Step 2: Analyze event listeners

   The button's click handler runs and shows 'Button clicked'. The body's click listener does not run because propagation is stopped.

3. Final Answer:

   Only 'Button clicked' alert shows; 'Body clicked' is blocked. -> Option A

4. Quick Check:

   stopPropagation blocks event bubbling [OK]

Hint: stopPropagation stops event bubbling to parents [OK]

Common Mistakes:

• Assuming both alerts show
• Confusing stopPropagation with preventDefault
• Thinking event is completely canceled

4. You wrote this Svelte code:

<a href='https://example.com' on:click|preventDefault|stopPropagation={goSomewhere}>Link</a>
function goSomewhere() {
  console.log('Navigating');
}

But clicking the link still navigates to the URL. What is the likely problem?

medium

A. The event modifiers are correct; the problem is elsewhere.

B. The function goSomewhere does not call event.preventDefault().

C. You forgot to pass the event parameter to goSomewhere.

D. The modifiers are in wrong order; preventDefault must come after stopPropagation.

Solution

1. Step 1: Check event modifiers usage

   In Svelte, preventDefault and stopPropagation modifiers automatically call the respective event methods before the handler runs.

2. Step 2: Verify code correctness

   The modifiers are correctly applied and order does not matter. The function does not need to call event.preventDefault()</> manually.

3. Step 3: Consider other causes

   If navigation still happens, the problem is likely outside this snippet, such as browser caching or other scripts.

4. Final Answer:

   The event modifiers are correct; the problem is elsewhere. -> Option A

5. Quick Check:

   Modifiers auto-call preventDefault and stopPropagation [OK]

Hint: Modifiers auto-call preventDefault; no manual call needed [OK]

Common Mistakes:

• Thinking modifier order matters
• Expecting manual event.preventDefault() call
• Assuming missing event parameter causes issue

5. You want to create a nested clickable list in Svelte where clicking a child item logs 'Child clicked' and clicking the parent logs 'Parent clicked'. You want to prevent the parent's click when a child is clicked. Which code correctly uses event modifiers to achieve this?

<ul on:click={parentClick}>
  <li on:click|???={childClick}>Child</li>
</ul>

function parentClick() {
  console.log('Parent clicked');
}
function childClick() {
  console.log('Child clicked');
}

hard

A. preventDefault

B. stopPropagation

C. stopPropagation|preventDefault

D. preventDefault|stopPropagation

Solution

1. Step 1: Understand event bubbling in nested elements

   Clicking a child triggers its click event and then bubbles up to the parent, triggering parent's click.

2. Step 2: Use stopPropagation on child click

   Adding stopPropagation on the child's click event stops the event from bubbling to the parent, preventing parent's handler from running.

3. Step 3: Confirm preventDefault is not needed

   We do not want to stop default browser actions here, only stop bubbling, so preventDefault is unnecessary.

4. Final Answer:

   stopPropagation -> Option B

5. Quick Check:

   Use stopPropagation to block parent event [OK]

Hint: Use stopPropagation to block parent event on child click [OK]

Common Mistakes:

• Using preventDefault instead of stopPropagation
• Combining both modifiers unnecessarily
• Reversing modifier order thinking it matters