vue 中阻止事件冒泡，捕獲，默認行為事件

轉載：https://www.jianshu.com/p/73ace6422ea3

要想了解 VUE 阻止事件冒泡和捕獲方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕獲方法

1. js 事件的三階段

 

image

• 捕獲階段
• 目標階段:執行當前對象的事件處理程序
• 冒泡階段

2. js 阻止事件冒泡，捕獲

• 阻止事件冒泡： event.stopPropagation() 或 event.cancelBubble = true (IE)
• 阻止瀏覽器默認行為： event.preventDefault()

3. vue 阻止事件冒泡，捕獲

• @click.stop : 阻止事件冒泡
• @click.prevent : 阻止事件默認行為
• @click.self : 事件只作用在元素本身，而不是其子元素

<!-- 阻止單擊事件繼續傳播 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form @submit.prevent></form>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div @click.self="doThat">...</div>

補充其他修飾符

• @click.capture : 使用事件捕獲模式
• @click.once : 事件只觸發一次 2.1.4新增
• @scroll.passive : 告訴瀏覽器這個事件的默認行為不會被取消 2.3.0新增
• @keyup.enter : 按鍵修飾符，enter被按下的時候觸發
• @click.ctrl : 系統修飾符，Ctrl 被按下的時候觸發 2.1.0新增
• @click.ctrl.exact : 有且只有 Ctrl 被按下的時候才觸發 2.5.0新增

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處處理，然后才交由內部元素進行處理 -->
<div @click.capture="doThis">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a @click.once="doThis"></a>
<!-- scroll事件不會取消默認的滾動行為 -->
<div @scroll.passive="onScroll">...</div>
<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input @keyup.13="submit">
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>

使用修飾符時，順序很重要，相應的代碼會以同樣的順序產生。
例如：用 @click.prevent.self 會阻止所有的點擊，而 @click.self.prevent 只會阻止元素上的點擊。