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.