事件冒泡效果与阻止事件冒泡方法

最新推荐文章于 2022-12-07 20:32:59 发布

看到代码头都是大的

最新推荐文章于 2022-12-07 20:32:59 发布

阅读量303

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ym5209999/article/details/107512318

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

事件冒泡效果演示：

事件冒泡起因：
元素本身与父元素绑定了同一事件(演示为单击事件)后，在自身的事件被触发后，父元素的事件也会默认被触发。到window或document层时，事件才会终止。
由于代码较少，故全部都存放在index.html中，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 800px;
        height: 600px;
        margin: 20px auto;
        border: 1px solid #ededed;
        background: #ededed;
    }

    #box > p {
        font-size: 24px;
        margin: 5px auto;
        text-align: center;
    }

    #box1 {
        margin: auto;
        width: 500px;
        height: 500px;
        background: #8a6de9;
        border: 1px solid #8a6de9;
    }

    #box2 {
        margin: 100px auto;
        width: 300px;
        height: 300px;
        background: #f46e00;
    }
</style>

<div id="box">
    <p>事件冒泡演示效果</p>
    <span>&emsp;&emsp;效果说明：<br>&emsp;&emsp;&emsp;&emsp;给两个div都绑定单击事件，在点击内层的div后，会自动触发外层的单击事件。</span>
    <div id="box1">
        <p>box1</p>
        <div id="box2">
            <p>box2</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    let box1 = document.getElementById('box1');
    let box2 = document.getElementById('box2');
    // box1单击事件
    box1.onclick = function (even) {
        alert('点击了box1');
    };


    // box2单击事件
    box2.onclick = function (even) {
        alert('点击了box2');
    }

</script>

</body>
</html>

事件冒泡效果直接复制代码执行即可看到。

阻止事件冒泡后的效果：

阻止事件冒泡：在元素本身的事件被执行后，阻止其父元素的事件被触发，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 800px;
        height: 600px;
        margin: 20px auto;
        border: 1px solid #ededed;
        background: #ededed;
    }

    #box > p {
        font-size: 24px;
        margin: 5px auto;
        text-align: center;
    }

    #box1 {
        margin: auto;
        width: 500px;
        height: 500px;
        background: #8a6de9;
        border: 1px solid #8a6de9;
    }

    #box2 {
        margin: 100px auto;
        width: 300px;
        height: 300px;
        background: #f46e00;
    }
</style>

<div id="box">
    <p>事件冒泡演示效果</p>
    <span>&emsp;&emsp;效果说明：<br>&emsp;&emsp;&emsp;&emsp;给两个div都绑定单击事件，在点击内层的div后，会自动触发外层的单击事件。</span>
    <div id="box1">
        <p>box1</p>
        <div id="box2">
            <p>box2</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    let box1 = document.getElementById('box1');
    let box2 = document.getElementById('box2');
    // box1单击事件
    box1.onclick = function (even) {
        alert('点击了box1');
    };


    // box2单击事件
    box2.onclick = function (even) {
        alert('点击了box2');
        even.stopPropagation();  // 区别点，阻止事件冒泡的代码
    }

</script>

</body>
</html>

看到代码头都是大的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡效果与阻止事件冒泡方法

事件冒泡效果演示：事件冒泡起因：元素本身与父元素绑定了同一事件(演示为单击事件)后，在自身的事件被触发后，父元素的事件也会默认被触发。到window或document层时，事件才会终止。由于代码较少，故全部都存放在index.html中，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡</title>
复制链接

扫一扫