Vue事件修饰符中的捕获触发事件 .capture

最新推荐文章于 2024-09-29 23:24:28 发布

小蘑菇0629

最新推荐文章于 2024-09-29 23:24:28 发布

阅读量6.2k

点赞数 2

分类专栏：学习笔记文章标签： vue 事件捕捉 .capture

本文链接：https://blog.csdn.net/weixin_41807530/article/details/95960716

版权

学习笔记专栏收录该内容

49 篇文章 0 订阅

订阅专栏

实现捕获触发事件的机制,即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。

多用于遇到事件冒泡是控制触发顺序

例：

<div @click.capture = "divClick">
    <a href="www.baidu.com" @click="linkClick">点击</a>
</div>
<script>
var vm = new vue ({
  el:"#app",
  data: {},
  methods: {
    divClick() {
       console.log("divClick")
    },
    linkClick() {
       console.log("linkClick")
    }
  }
})
</script>

结果：divClick

linkClick

如果不加捕获触发事件 .capture 则先触发a 标签的事件。结果就是 linkClick divClick