js事件冒泡、捕获的理解（结合vue）

谁践踏了优雅 2022-06-05 02:47 108阅读 0赞

### 事件冒泡与事件捕获 ###

页面上的元素添加一个绑定事件，绑定事件方法的第三个参数（布尔类型，默认false事件冒泡），就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../../jquery.min.js"></script>
    </head>
    <body>
    <div id="parent">
        <div id="child" class="child">demoDiv</div>
    </div>
    </body>
    <script>
        document.getElementById("parent").addEventListener("click", function (e) {
            alert("parent事件被触发，" + this.id);
        }, true)
        document.getElementById("child").addEventListener("click", function (e) {
            alert("child事件被触发，" + this.id)
        }, true)
    </script>
    </html>

第三个参数都设置为true，事件捕获。以上示例阻止冒泡可以通过在alert后面添加一行代码实现

e.stopPropagation();

### 事件冒泡结合vue.js ###

@click.stop阻止冒泡

参考：[彻底弄懂JS的事件冒泡和事件捕获][JS]

[解析Javascript事件冒泡机制][Javascript]

[JS]: https://www.cnblogs.com/qq9694526/p/5653728.html
[Javascript]: http://blog.csdn.net/luanlouis/article/details/23927347