摘要

事件修飾符是附加在事件後的特殊後綴，用以宣告式地處理常見的事件操作。.prevent 用於阻止預設行為，.stop 用於停止事件冒泡。

定義與說明

.prevent

自動呼叫 event.preventDefault()。常用於 <form> 的 submit 事件，防止頁面重整。

.stop

自動呼叫 event.stopPropagation()。常用於巢狀元素，防止子層的事件觸發父層的監聽器。

實作範例

HTML Template

<!-- 阻止表單提交時的頁面重整 -->
<form @submit.prevent="onSubmit"></form>

<!-- 點擊子層時，不會觸發父層的點擊事件 -->
<div @click="onParentClick">
  <button @click.stop="onChildClick">子層按鈕</button>
</div>

結論

事件修飾符讓我們的意圖在模板中一目了然，並將 DOM 行為的控制邏輯與業務邏輯分離，使 JavaScript 方法更純粹、程式碼更易讀。

事件修飾符 .prevent .stop