js禁止事件冒泡

最新推荐文章于 2024-04-24 16:11:00 发布

Utopian_x

最新推荐文章于 2024-04-24 16:11:00 发布

阅读量528

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/Utopian_x/article/details/120478526

版权

首先了解冒泡是什么？

事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。（其实就是事件的向上传导，如多个元素嵌套，里面的元素触发了事件，外面元素也会自动触发该事件。）

<body>
    <div id="box1">我是box1
        <p id="box2">我是box2
            <span id="box3">我是box3</span>
        </p>
    </div>
</body>
<script>
    document.getElementById("box1").onclick = function () {
        console.log(this.id);
    };
    document.getElementById("box2").onclick = function () {
        console.log(this.id);
    };
    document.getElementById("box3").onclick = function (e) {
        console.log(this.id);
        
    };
</script>

在未禁止冒泡事件的情况下点击box3

禁止冒泡事件的方法

1、window.event.cancelBubble=true;

document.getElementById("box1").onclick = function () {
        console.log(this.id);
    };
    document.getElementById("box2").onclick = function () {
        console.log(this.id);
    };
    document.getElementById("box3").onclick = function () {
        console.log(this.id);
        // 阻止事件冒泡
        // IE特有的,谷歌支持,火狐不支持
        window.event.cancelBubble=true;
    };

使用window.event.cancelBubble=true;方法禁止后点击box3

2、e.stopPropagation();

document.getElementById("box1").onclick = function () {
        console.log(this.id);
    };
    document.getElementById("box2").onclick = function () {
        console.log(this.id);
    };
    document.getElementById("box3").onclick = function (e) {
        console.log(this.id);
        e.stopPropagation();
    };

使用e.stopPropagation();方法禁止后点击box3

Utopian_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js禁止事件冒泡

首先了解冒泡是什么？事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。（其实就是事件的向上传导，如多个元素嵌套，里面的元素触发了事件，外面元素也会自动触发该事件。）<body> <div id="box1">我是box1 <p id="box2">我是box2 <span id="box3">我是box3</span> ...
复制链接

扫一扫