Event modifiers (preventDefault, stopPropagation) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to prevent the default form submission behavior.

Svelte

<form on:submit[1]={handleSubmit}>
  <button type="submit">Submit</button>
</form>

Drag options to blanks, or click blank then click option'

A|capture

B|stopPropagation

C|once

D|preventDefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using |stopPropagation instead of |preventDefault

Forgetting to add any modifier

Using |preventDefault stops the form from submitting normally, letting you handle it in code.

2fill in blank

medium

Complete the code to stop the click event from bubbling up to parent elements.

Svelte

<button on:click[1]={handleClick}>Click me</button>

Drag options to blanks, or click blank then click option'

A|preventDefault

B|once

C|stopPropagation

D|capture

Attempts:

3 left

💡 Hint

Common Mistakes

Using |preventDefault instead of |stopPropagation

Not using any modifier and expecting no bubbling

The |stopPropagation modifier stops the event from moving up to parent elements.

3fill in blank

hard

Fix the error in the code to prevent default and stop propagation on the link click.

Svelte

<a href="#" on:click[1]={handleLinkClick}>Link</a>

Drag options to blanks, or click blank then click option'

A.preventDefault.stopPropagation

B|preventDefault.stopPropagation

C|preventDefault|stopPropagation|once

D|preventDefault|stopPropagation

Attempts:

3 left

💡 Hint

Common Mistakes

Using pipe symbols to chain modifiers

Using multiple pipes instead of dots

In Svelte, multiple event modifiers are chained with dots, like |preventDefault.stopPropagation.

4fill in blank

hard

Fill both blanks to prevent default and stop propagation on the form submit event.

Svelte

<form on:submit[1][2]={handleSubmit}>
  <button type="submit">Send</button>
</form>

Drag options to blanks, or click blank then click option'

A.preventDefault

B|stopPropagation

C.stopPropagation

D|preventDefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using pipes instead of dots to chain modifiers

Mixing pipe and dot notation

Use dot notation to chain preventDefault and stopPropagation modifiers: |preventDefault.stopPropagation.

5fill in blank

hard

Fill all three blanks to prevent default, stop propagation, and run the handler only once on button click.

Svelte

<button on:click[1][2][3]={handleClick}>Click me</button>

Drag options to blanks, or click blank then click option'

A|preventDefault

B.stopPropagation

C.once

D.preventDefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using pipes instead of dots

Forgetting to chain all modifiers

Chain modifiers with dots: |preventDefault.stopPropagation.once to prevent default, stop bubbling, and run once.