JS 阻止冒泡阻止默认

最新推荐文章于 2022-09-13 11:01:56 发布

@剁椒鱼头

最新推荐文章于 2022-09-13 11:01:56 发布

阅读量95

点赞数

文章标签： javascript elementui 前端

本文链接：https://blog.csdn.net/qq_57215961/article/details/124990875

版权

1.什么是事件冒泡？

事件冒泡是指事件由子级传向父级，事件冒泡常常会使事件按照不属于我们原本的方式进行，影响我们正常处理事件的流程。

下边的代码通过控制台可以看出事件冒泡的流程。

<body>
    <div id="info">
        <div class="box-1" onclick="box1()">
            <p>最外层</p>
            <div class="box-2" onclick="box2()">
                <p>第二层</p>
                <div class="box-3" onclick="box3()">
                    <p>第三层</p>
                    <div class="box-4" onclick="bubbles()">
                        <p>最底</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

        function box1() {
            console.log("最外层盒子被点击了");
        }

        function box2() {
            console.log("第二个盒子被点击了");
        }

        function box3() {
            console.log("第三个盒子被点击了");
        }
        function bubbles() {
            console.log("最底层盒子被点击了")
        }
    </script>
</body>

控制台

上边的是点击最底出现的结果，只点击了一个子级标签，却触发了四个点击事件，并且是从子级向父级的过程，这就是事件冒泡。

2.阻止冒泡

<body>
    <div id="info">
        <div class="box-1">
            <p>最外层</p>
            <div class="box-2">
                <p>第二层</p>
                <div class="box-3">
                    <p>第三层</p>
                    <div class="box-4">
                        <p>最底</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var box1 = document.querySelector(".box-1");
        var box2 = document.querySelector(".box-2");
        var box3 = document.querySelector(".box-3");
        var box4 = document.querySelector(".box-4");

        //使用 e.stopPropagation() 阻止冒泡
        box1.onclick = function (e) {
            e.stopPropagation();
            console.log("最外层");
        }
        box2.onclick = function (e) {
            e.stopPropagation();
            console.log("第二层");
        }
        box3.onclick = function (e) {
            e.stopPropagation();
            console.log("第三层");
        }
        box4.onclick = function (e) {
            e.stopPropagation();
            console.log("最底层");
        }
    </script>
</body>

控制台

阻止冒泡后，点击最底，不会触发其他父级的点击事件

3.默认行为

在html中有很多自带默认事件的元素，典型例子是：单击<a>标签后，会自动跳转到href指定的URL链接，单击表单的submit按钮后，会自动将表单数据提交到指定的服务器端页面处理，因此我们把标签具有的这种行为称为默认行为。

4.阻止默认事件

<body>
    <a href="https://www.baidu.com">百度</a>
</body>
<script>
    var a = document.querySelector("a");
    //方式1：DOM标准写法，早期版本不支持
    a.addEventListener('click', function (e) {
        e.preventDefault();
    })
    //方式2：推荐的使用注册方式
    a.onclick = function (e) {
        e.preventDefault(); //标准浏览器使用e.prenventDefault();
        e.returnValue;      //早期浏览器（IE6 - IE8）使用returnValue属性
    }
</script>