关于冒泡事件,你想知道的都在这里

最新推荐文章于 2022-07-25 21:16:02 发布

喜樂的CC

最新推荐文章于 2022-07-25 21:16:02 发布

阅读量262

点赞数 1

分类专栏： web前端 php/java后端

web前端同时被 2 个专栏收录

172 篇文章 6 订阅

订阅专栏

php/java后端

17 篇文章 0 订阅

订阅专栏

代码复制粘贴到你的编辑器,然后一个个打开注释就明白了~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            height: 200px;
            width: 200px;
            margin: 0 auto;
        }

        .box1 a {
            display: block;
            height: 100%;
            width: 100%;
            background: red;
        }
    </style>
    <script src="./jquery-1.12.4.min.js"></script>
</head>

<body>
    <div class="box1">
        <a href="http://www.baidu.com" target="_blank"></a>
        <!-- _blank  在新窗口中打开链接 
        _parent  在父窗体中打开链接 
        _self  在当前窗体打开链接,此为默认值 
        _top  在当前窗体打开链接，并替换当前的整个窗体(框架页)  -->
    </div>
</body>

</html>
<script>
    // 不阻止
    document.querySelector(".box1").onclick = function () {
        console.log("1"); //不阻止事件冒泡会打印1，页面跳转;               
    }


    //阻止冒泡 
    // event.stopPropagation()方法
    // 这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开.
    // document.querySelector(".box1 a").onclick = function (event) {
    //     event.stopPropagation(); //不会打印1，但是页面会跳转；              

    // }
    // document.querySelector(".box1").onclick = function () {
    //     console.log("1")
    // }

    // event.preventDefault()方法
    // 这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
    // document.querySelector(".box1 a").onclick = function (event) {
    //     //阻止默认事件  
    //     event.preventDefault(); //页面不会跳转，但是会打印出1，  
    // }

    // document.querySelector(".box1").onclick = function () {
    //     console.log("1");
    // }


    // document.querySelector(".box1").onclick = function () {
    //     console.log("1");
    // }
    // //阻止冒泡  
    // document.querySelector(".box1 a").onclick = function (event) {
    //     event.stopPropagation();
    //     //阻止默认事件  
    //     event.preventDefault(); //页面不会跳转，也不会打印出1  
    // }



    // 现在很多js代码都直接使用jQuery来写，在jQuery中使用return false时，相当于同时使用event.preventDefault和event.stopPropagation，它会阻止冒泡也会阻止默认行为。 但是使用原生js写时，return false只会阻止默认行为。

    // 原生
    // document.querySelector(".box1").onclick = function () {
    //     console.log("1");//页面不会跳转，但会打印出1
    // }
    // document.querySelector(".box1 a").onclick = function (event) {
    //     return false;

    // }

    //jq
    // $(function () {
    //     $(".box1").click(function () {
    //         console.log("1");
    //     });
    //     $(".box1 a").click(function (event) {
    //         return false; //页面不会跳转，也不会打印出1，等于同时调用了event.stopPropagation()和event.preventDefault()  
    //     })

    // })
</script>