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

最新推荐文章于 2024-06-26 08:53:16 发布

chang_hf

最新推荐文章于 2024-06-26 08:53:16 发布

阅读量2.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/chang_li/article/details/78543227

版权

js 专栏收录该内容

12 篇文章 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阻止冒泡

<script src="vue.js"></script>
<script>
	 window.οnlοad=function(){
            new Vue({
                el:'#box',
                data:{
                },
                methods:{
                    show:function(){
                        alert(1);
                    },
                    show2:function(){
                        alert(2);
                    }
                }
            });
        };
</script>

<div id="box">
        <div @click="show2()">
            <input type="button" value="按钮" @click.stop="show()">
        </div>
</div>

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

解析Javascript事件冒泡机制

chang_hf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js事件冒泡、捕获的理解（结合vue）

事件冒泡与事件捕获页面上的元素添加一个绑定事件，绑定事件方法的第三个参数（布尔类型，默认false事件冒泡），就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。 Title demoDiv document.getElementById("parent").addEventListener("click",
复制链接

扫一扫

专栏目录