当前位置：
凯发ag旗舰厅登录网址下载 >
前端技术
> vue
>内容正文
vue
vue事件修饰符：通过@click.self的self属性来阻止内层向外层冒泡 -凯发ag旗舰厅登录网址下载
凯发ag旗舰厅登录网址下载
收集整理的这篇文章主要介绍了
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>documenttitle><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"><div class="outer" @click.self="outer"><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>总结
以上是凯发ag旗舰厅登录网址下载为你收集整理的vue事件修饰符：通过@click.self的self属性来阻止内层向外层冒泡的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。
- 上一篇： vue事件修饰符：通过@click.ca
- 下一篇： vuex状态管理模式：入门demo（状态