Svelte 事件修飾符

DOM 事件處理程序具有額外的 修飾符（modifiers） 。例如，帶 ?once? 修飾符的事件處理程序只運(yùn)用一次：

<script>
	function handleClick() {
		alert('no more alerts')
	}
</script>

<button on:click|once={handleClick}>
	Click me
</button>

所有修飾符列表：

• preventDefault ：調(diào)用event.preventDefault() ，在運(yùn)行處理程序之前調(diào)用。比如，對(duì)客戶端表單處理有用。
• stopPropagation ：調(diào)用 event.stopPropagation(), 防止事件影響到下一個(gè)元素。
• passive ： 優(yōu)化了對(duì) touch/wheel 事件的滾動(dòng)表現(xiàn)(Svelte 會(huì)在合適的地方自動(dòng)添加滾動(dòng)條)。
• capture — 在 capture 階段而不是bubbling 階段觸發(fā)事件處理程序 (MDN docs)
• once ：運(yùn)行一次事件處理程序后將其刪除。
• self — 僅當(dāng) event.target 是其本身時(shí)才執(zhí)行。

你可以將修飾符組合在一起使用，例如：on:click|once|capture={...}。