• 技术文章 >web前端 >js教程

    Javascript如何阻止事件冒泡和事件本身发生

    逆旅行人逆旅行人2021-04-15 13:55:16原创110
    Javascript中事件冒泡是由节点产生,然后会影响到父节点,逐级上升,最后慢慢影响到整个页面,但是有时我们想要阻止事件冒泡的发生甚至事件本身的发生呢?本文就带大家一起来了解一下。

    1.阻止事件冒泡发生

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .boxA {
                overflow: hidden;
                width: 300px;
                height: 300px;
                margin: 100px auto;
                background-color: blue;
                text-align: center;
            }       
            .boxB {
                width: 200px;
                height: 200px;
                margin: 50px;
                background-color: green;
                line-height: 200px;
                color: #fff;
            }
        </style>
    </head>
    
    <body>
        <div class="boxA">
            <div class="boxB">boxB</div>
        </div>
        <script>
            var boxA = document.querySelector('.boxA');
            var boxB = document.querySelector('.boxB');
            boxA.onclick = function (e) {
            console.log('我被点击了boxA');
        };
        boxB.onclick = function (e) {
            e.cancelBubble=true; //不冒泡
            console.log('我被点击了boxB');
        };
        </script>
    </body>
    </html>

    2.阻止事件本身发生

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <form action="http://www.php.cn" method="POST">
    <button type="submit">按钮1</button>
    </form>    
    <body>
        <script>
            const btn=document.querySelector("button");
            console.log(btn);
            btn.addEventListener("click",function(e){
                e.preventDefault();
            });
        </script>
    </body>
    </html>

    推荐:《2021年js面试题及答案(大汇总)

    以上就是Javascript如何阻止事件冒泡和事件本身发生的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:事件冒泡 Javascript
    上一篇:javascript如何判断字符是否为空 下一篇:javascript如何在浏览器运行
    第15期线上培训班

    相关文章推荐

    • 在vue中如何阻止click事件冒泡• js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件• jQuery阻止事件冒泡实例分析• 对于js的事件冒泡和事件捕获的分析• 浅谈JavaScript中的事件冒泡和事件捕获

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网