66浅谈：事件冒泡、事件捕获，及阻止办法

最新推荐文章于 2025-06-08 15:44:34 发布

This luckly boy

最新推荐文章于 2025-06-08 15:44:34 发布

阅读量894

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：前端

本文链接：https://blog.csdn.net/m0_65284931/article/details/125834516

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了事件冒泡和事件捕获的概念，这两种机制用于解决页面中事件的触发顺序问题。通过示例展示了事件从内向外（冒泡）和从外向内（捕获）的触发顺序，并提供了JavaScript代码示例来阻止事件冒泡。在Vue中，也展示了如何使用`.stop`修饰符阻止事件冒泡。

1、事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

<div id="box1">

  <div id="box2">

    <div id="box3">给它们都绑定点击事件</div>

  </div>

</div>

冒泡型事件的触发顺序如下图：由内而外，由子到父的一个触发顺序

而 捕获型事件触 的触发顺序如下图：由外向里触发

2.阻止事件冒泡事件捕获

var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');

box1.onclick = function () {
console.log('box1');

};
box2.onclick = function (e) {
console.log('box2');
e.stopPropagation();

};
box3.onclick = function (e) {
console.log('box3');
e.stopPropagation();
};