在Vue中，點擊事件流程分為三個階段。首先是捕獲階段，然后是目標階段，最后是冒泡階段。當我們在頁面中點擊一個元素時，Vue會依次觸發這三個階段的事件，直到事件被處理完畢。
<div @click.capture="handleCapture">
<div @click="handleTarget">
<div @click.stop="handleStop">
<div @click.self="handleSelf"></div>
</div>
</div>
</div>以上是一個包含了四個元素的嵌套結構。其中，@click表示綁定點擊事件，.capture表示為捕獲階段綁定事件而不是冒泡階段，.stop表示停止事件冒泡，.self表示只有點擊該元素本身才會觸發事件。
接下來，我們分別編寫四個事件處理函數，用來觀察點擊事件的順序。
methods: {
handleCapture() {
console.log('捕獲階段處理函數')
},
handleTarget() {
console.log('目標階段處理函數')
},
handleStop() {
console.log('停止冒泡處理函數')
},
handleSelf() {
console.log('點擊自身處理函數')
}
}運行程序并點擊四個元素，可以得出以下結論：
- 在捕獲階段，會先調用最外層元素的點擊處理函數；
- 在目標階段，會調用當前點擊元素的點擊處理函數；
- 如果當前點擊元素上有.stop修飾符，事件就會在這里終止，不再后續傳遞；
- 如果當前點擊元素上有.self修飾符，事件就只會在點擊該元素本身時觸發，而不會在其子元素上觸發。
通過深入理解Vue點擊事件的順序，我們可以更好地掌握Vue的事件機制，更靈活地運用事件處理。同時，在編寫復雜的頁面時，也可以避免因為事件傳遞導致的不必要的影響。
上一篇java 和 go 知乎
下一篇html點擊設置彈框