Vue 3 事件修飾符：.prevent、.stop 與 .self
在前端開發中，我們經常需要處理事件 冒泡 或 阻止瀏覽器的預設行為。在傳統 JavaScript 中，我們必須在函式內手動寫下 preventDefault()。
Vue 3 提供了強大的事件修飾符，讓您可以將這些 DOM 細節直接寫在 <template> 中，使 JavaScript 函式能專注於核心業務邏輯。本文將帶您逐一拆解最常用的事件修飾符與其實戰應用！
什麼是事件修飾符？
事件修飾符是透過點號 . 接在 事件名稱 之後，例如：@click 或 @submit。它們可以單獨使用，也可以鏈式串接。
為什麼要使用事件修飾符？
- 程式碼更乾淨：不需要在每個方法裡重複寫
stopPropagation()。 - 邏輯更純粹：讓 JavaScript 函式變成純粹的資料處理邏輯，不與 DOM 結構深度耦合。
常用事件修飾符詳解與對比
以下是 Vue 3 中最常使用的事件修飾符：
| 修飾符 | 功能說明 | 對應原生 JS |
|---|---|---|
stop | 阻止事件繼續向上冒泡 | stopPropagation() |
capture | 用捕捉模式（從外到內）監聽 | addEventListener(..., true) |
self | 當前元素自身觸發時才觸發處理函式 | target === currentTarget |
once | 事件只會觸發一次 | removeEventListener |
prevent | 阻止瀏覽器的預設行為 | preventDefault() |
修飾符的串接順序
Vue 允許您將多個修飾符串接在一起，例如：@click.stop.prevent。然而，串接的順序非常重要，因為 Vue 是按照程式碼編寫的順序由左至右產生的。
@click.prevent.self：會阻止所有點擊的預設行為。@click.self.prevent：只有當點擊元素本身時，才會阻止預設行為。
總結
善用 Vue 3 的事件修飾符，不僅能讓您的模板看起來更具語意化，更能保持邏輯的乾淨。在處理 表單、彈窗、複雜列表點擊時，記得先想想看有沒有對應的修飾符可以使用，這能幫您省下不少撰寫原生 DOM API 的時間！
常見問題
.stop 與 .prevent 有什麼不同？
.stop 對應 stopPropagation()，阻止事件往父層冒泡；.prevent 對應 preventDefault()，阻止瀏覽器的預設行為，例如：表單送出後重新整理、點擊連結後跳頁。兩者可以同時使用。
.self 是什麼時候會用到？
最典型的是彈窗遮罩：在遮罩層寫 @click.self="close"，只有點到遮罩本身才關閉，點到彈窗內容時不會誤觸關閉。
修飾符的串接順序會影響結果嗎？
會。修飾符依照由左至右的順序產生程式碼，@click.prevent.self 會先阻止所有點擊的預設行為；@click.self.prevent 則只有點到元素自身時才阻止預設行為。
表單送出要用哪個修飾符？
在 <form> 上寫 @submit.prevent="handleSubmit"，可以阻止瀏覽器預設的送出與頁面重新整理，改由 JavaScript 自行處理資料。
.capture 與冒泡有什麼關係？
事件傳遞分為捕獲與冒泡兩個階段。預設監聽在冒泡階段（由內而外），加上 .capture 會改在捕獲階段（由外而內）觸發，適合需要優先攔截事件的場景。
.once 與自己呼叫 removeEventListener 有什麼差別？
效果相同，但 .once 由 Vue 自動處理移除，不必自己保留函式參照，也不會因為忘記解除而留下多餘的監聽器。
