vue事件修饰符：通过@click.self的self属性来阻止内层向外层冒泡
生活随笔
收集整理的這篇文章主要介紹了
vue事件修饰符：通过@click.self的self属性来阻止内层向外层冒泡
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
知識點：
事件流
當一個HTML元素產生一個事件時，該事件會在元素節點與根節點之間的路徑傳播，路徑所經過的節點會收到該事件，這個傳播的過程叫做DOM事件流
事件又分為 冒泡事件 捕獲事件
冒泡事件
微軟提出 事件由子元素到父元素的過程 稱之為冒泡 金魚吐泡泡
捕獲事件
網景提出 事件由父元素到子元素的過程 稱之為捕獲 鷹抓老鼠
當兩者同時出現時 先捕獲 后冒泡
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{width: 180px;height: 180px;background:gold;margin: 100px auto;padding: 30px;border-radius: 50%;}.outer .center{width: 130px;height: 130px;padding: 30px;background:pink;border-radius: 50%;}.outer .center .inner{width: 130px;height: 130px;background:cyan;border-radius: 50%;}</style> </head> <body><div id="app"><!-- .self會阻止center向outer傳遞事件（冒泡） --><div class="outer" @click.self="outer"><!-- center沒有添加self屬性，因此inner會冒泡到center --><div class="center" @click="center"><div class="inner" @click.self="inner"></div></div></div></div><script src="js/vue.js"></script><script>var vue = new Vue({el:"#app",methods:{outer() {console.log("外層")},center() {console.log("中間")},inner(event) {console.log("內層")}}})</script> </body> </html>總結
以上是生活随笔為你收集整理的vue事件修饰符：通过@click.self的self属性来阻止内层向外层冒泡的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue事件修饰符：通过@click.ca
- 下一篇： vuex状态管理模式：入门demo（状态