事件流阻止元素默认事件

浅浅的花香味﹌ 2022-05-17 13:42 195阅读 0赞

当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件，事件传播的顺序叫做事件流程。

事件流的分类：

1.冒泡型事件流（所有浏览器都支持）

由最明确的事件源到最不明确的事件源依次向上触发。

2.捕获型事件流（IE不支持 W3c标准 火狐）（不常用）

由最不明确的事件源到最明确的事件源依次向下触发。

阻止事件流的方法：

IE： 事件对象.cancelBubble = true;

火狐：事件对象.stopPropagation();

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>阻止事件流</title>
        <style type="text/css">
            #beijing{
                width: 400px;
                height: 400px;
                background-color: red;
            }
            #chaoyang{
                width: 300px;
                height: 300px;
                background-color: blue;
            }
            #shunbailu{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
    <div id="beijing">北京
        <div id="chaoyang">朝阳
           <div id="shunbailu">
               顺白路
           </div>
        </div>
    </div>
    <script>
        document.getElementById("beijing").onclick = function () {
            alert("北京");
        }
        document.getElementById("chaoyang").onclick = function (e) {
            alert("朝阳");
    
            var ev = window.event || e;
            if(document.all){
                // IE的属性
                ev.cancelBubble = true;
            }else{
                //火狐的方法
                ev.stopPropagation();
            }
        }
        document.getElementById("shunbailu").onclick = function (e) {
            alert("顺白路");
            var ev = window.event || e;
            if(document.all){
                // IE的属性
                ev.cancelBubble = true;
            }else{
                //火狐的方法
                ev.stopPropagation();
            }
        }
    </script>
    </body>
    </html>

阻止浏览器默认行为：（一般用于a标签和form表单里的submit按钮）

IE：事件对象.returnValue = false;

火狐：事件对象.preventDefault();

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>每日一练</title>
        <style>
        </style>
    </head>
    <body>
    <a href="https://www.baidu.com" id="link">百度</a>
    <script>
    var m = document.getElementById("link");
    m.onclick = function (e) {
        alert("点击成功");
        // 获得事件对象
        // 阻止浏览器默认行为的方法在事件对象里存储
        var ev = window.event || e;
        if(document.all){
            // IE的属性
            ev.returnValue = false;
        }else{
            // 火狐的方法
            ev.preventDefault();
        }
    
    }
    </script>
    </body>
    </html>

也可以用一种较为简单的方法：在a标签的href属性里加：javascript:void(0);

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>每日一练</title>
        <style>
        </style>
    </head>
    <body>
    <a href="javascript:void(0);"></a>
    </body>
    </html>