Svelte 事件修饰符
DOM 事件处理程序具有额外的 修饰符(modifiers) 。例如,带 once
修饰符的事件处理程序只运用一次:
<script>
function handleClick() {
alert('no more alerts')
}
</script>
<button on:click|once={handleClick}>
Click me
</button>
所有修饰符列表:
preventDefault
:调用event.preventDefault()
,在运行处理程序之前调用。比如,对客户端表单处理有用。stopPropagation
:调用event.stopPropagation()
, 防止事件影响到下一个元素。passive
: 优化了对 touch/wheel 事件的滚动表现(Svelte 会在合适的地方自动添加滚动条)。capture
— 在 capture 阶段而不是bubbling 阶段触发事件处理程序 (MDN docs)once
:运行一次事件处理程序后将其删除。self
— 仅当 event.target 是其本身时才执行。
你可以将修饰符组合在一起使用,例如:on:click|once|capture={...}
。