vue事件修饰符:通过@click.self的self属性来阻止内层向外层冒泡
2023-09-14 09:01:59 时间
知识点:
事件流
当一个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>
相关文章
- ES6中的模板字符串改变html_vue事件绑定修饰符
- 那些年曾经没回答上来的vue面试题
- vue 点击事件获取当前元素
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- 【VUE】- 前端封装之父子组件传值
- Vue监听router实现面包屑导航
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件
- Nginx部署Vue项目
- vue.js中实现阻止事件冒泡
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue封装组件以及调用「建议收藏」
- 说说你对Vue的keep-alive的理解_2023-02-28
- Vue.nextTick 的原理和用途
- VUE系列 --- 网络模块axios(三)
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- Ant Design Vue自定义主题失效解决办法
- vue入门篇之Vue.js 组件
- 用Vue.js开发企业管理后台,我做到了
- Vue接入Redis拓展应用的可能性(vue调redis)
- 基于Vue的Redis网页设计(vue设计redis页面)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- 从零开始Vue项目中使用Redis(vue使用redis)
- 使用Vue和Redis创建完美的后台应用(vue redis后台)