Vue 3 事件修飾符：.prevent、.stop 與 .self

在前端開發中，我們經常需要處理事件 冒泡 或 阻止瀏覽器的預設行為。在傳統 JavaScript 中，我們必須在涵式內手動寫下 preventDefault()。

Vue 3 提供了強大的事件修飾符，讓您可以將這些 DOM 细節直接寫在 <template> 中，使 JavaScript 函式能專注於核心業務邏輯。本文將帶您逐一拆解最常用的事件修飾符與其實戰應用！

什麼是事件修飾符？

事件修飾符是透過點號 . 接在事件名稱，例如：@click 或 @submit。它們可以單獨使用，也可以鏈式串接。

為什麼要使用事件修飾符？

• 程式碼更乾淨：不需要在每個方法裡重複寫 stopPropagation()。
• 邏輯更純粹：讓 JavaScript 函式變成純粹的資料處理邏輯，不與 DOM 結構深度耦合。

常用事件修飾符詳解與對比

以下是 Vue 3 中最常使用的事件修飾符：

修飾符	功能說明	對應原生 JS
stop	阻止事件繼續向上冒泡	stopPropagation()
capture	用捕捉模式（從外到內）監聽	addEventListner(..., true)
self	當前元素自身觸發時才觸發處理函式	target === currentTarget
once	事件只會觸發一次	removeEventListner
prevent	阻止瀏覽器的預設行為	preventDefault()

修飾符的串接順序

Vue 允許您將多個修飾符串接在一起，例如 @click.stop.prevent。然而，串接的順序非常重要，因為 Vue 是按照程式碼編寫的順序由左至右產生的。

• @click.prevent.self：會阻止所有點擊的預設行為。
• @click.self.prevent：只有當點擊元素本身時，才會阻止預設行為。

總結

善用 Vue 3 的事件修飾符，不僅能讓您的模板看起來更具語意化，更能保持邏輯的乾淨。在處理表單、彈窗、複雜列表點擊時，記得先想想看有沒有對應的修飾符可以使用，這能幫您省下不少撰寫原生 DOM API 的時間！