mirror of https://github.com/sveltejs/svelte
1.2 KiB
1.2 KiB
title |
---|
Event modifiers |
DOM event handlers can have modifiers that alter their behaviour. For example, a handler with a once
modifier will only run a single time:
<script>
function handleClick() {
alert('no more alerts')
}
</script>
<button on:click|once={handleClick}>
Click me
</button>
The full list of modifiers:
preventDefault
— callsevent.preventDefault()
before running the handler. Useful for client-side form handling, for example.stopPropagation
— callsevent.stopPropagation()
, preventing the event reaching the next elementpassive
— improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so)nonpassive
— explicitly setpassive: false
capture
— fires the handler during the capture phase instead of the bubbling phase (MDN docs)once
— remove the handler after the first time it runsself
— only trigger handler if event.target is the element itself
You can chain modifiers together, e.g. on:click|once|capture={...}
.