vue事件修饰符:@click.capture捕获内层事件,从而改变默认的冒泡执行顺序
2023-09-14 09:01:59 时间
<!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">
<!-- 如果三个div @click的什么属性都不加那么就是从而向外冒泡执行 -->
<div class="outer" @click.capture="outer">
<div class="center" @click.capture="center">
<div class="inner" @click="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之js的高阶函数
- Vue中显示img图片,显示不出来怎么办?vue显示图片
- vue图片加载失败默认图片[通俗易懂]
- 创建vue脚手架项目
- html使用vue axios,使用 Vue和axios
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- vue源码分析-事件机制
- 「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
- 「后端小伙伴来学前端了」关于Vue中的自定义事件,组件绑定自定义事件实现通信
- vue监听页面刷新事件_vue监听数据变化自动刷新
- Vue生成二维码_vue视频软件怎么生成二维码
- Ant Design Vue 上手 | 结合 Vue.js 写一个音乐下载工具
- Vue.js 状态管理:Pinia 与 Vuex
- Vue Demi是如何让你的库同时支持Vue2和Vue3的
- Vue Ant Admin学习笔记,持续记录
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue PC端UI框架
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue实时监测Redis变化(vue监控redis变化)
- Vue如何连接Redis数据库(vue怎么连接Redis)
- Oracle Vue考场助力企业数据库技术突破(oracle vue考场)