事件冒泡。阻止事件冒泡 |阻止元素的默认行为

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Fanbin168/article/details/45013335

<.1>

事件冒泡

如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出
现冒泡问题。 

触发的顺序是从小范围到大范围。
这就是所谓的冒泡现象,一层一层往上。

<html>
<head>
    <title></title>
    <script src="jquery-2.1.3.js"></script>
    <style type="text/css">
        div#a {
            width: 500px;
            height: 500px;
            background-color: red;
        }

        div#b,div#d{
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        div#c,div#e{
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!--阻止事件冒泡-->
    <div id="a">
        <div id="b">
            <div id="c">
                <a id="a_linkB" href="http:///www.hao123.com" target="_blank">好123导航</a>
            </div>
        </div>
    </div>

    <!--阻止事件的默认行为-->
    <a id="a_linkA" href="http://www/baidu.com" target="_blank">百度</a>

    <!--阻止表单提交-->
    <form action="123.html">
        <input id="sub" type="submit" value="提交" />
    </form>

    <!--阻止事件冒泡,并阻止该事件后的后续事件处理函数-->
    <div id="d">
        <div id="e">测试stopImmediatePropagation()取消事件冒泡,并取消该事件的后续事件处理函数</div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(function () {
        
        //--------------------------【1】stopPropagation() 禁止事件冒泡

        $("div").click(function (e) {
            //e.stopPropagation(); //禁止div元素绑定的click事件冒泡 。当然我们还可以禁止其他事件的冒泡,比如mouseOver..等等
        })

        $("#a").click(function () {
            alert("我是A");
        })
        $("#b").click(function () {
            alert("我是B");
        })

        $("#c").click(function (e) {
           // e.stopPropagation(); //禁止id=c的div元素绑定的click事件冒泡
            alert("我是C");
        })

        //-----------------------【2】preventDefault() 取消某个元素的默认行为



        //网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。这就是元素的默认行为。
        $("#a_linkA").click(function (e) {
            e.preventDefault(); //阻止id为a_link的这个超链接的默认行为,当你点击这个超链接的时候,就不会在进行跳转到指定的网页了。
        })

        //-------------------------------------禁止表单提交


        $("#sub").click(function (e) {
            e.preventDefault();//禁止表单提交 ;   禁止submit的默认提交行为。我们看到点击“提交”的时不再提交数据了。
        })
        //如果说你不想对submit按钮的click默认事件做阻止,(submit的click默认事件就是提交表单),而是仅仅是想阻止这个提交事件,我们就可以在form表单这进行
        $("form").submit(function (e) {
            e.preventDefault(); //禁止表单提交。推荐用法
        });
        

        //-------------------------------------同时阻止默认行为且禁止冒泡行为

        $("#a_linkB").click(function (e) {
            e.stopPropagation(); //禁止id=a_linkB这个<a>标签的click事件冒泡
            e.preventDefault();  //禁止id=a_linkB这个<a>标签的click事件的默认行为(即:点击超链接不再有跳转的功能了)

            //。这两个方法如果需要同时启用的时候 还有一种简写方案代替,就是直接return false。

            //return false;
        });

        $("#a_linkB").click(function (e) {
            alert(e.isDefaultPrevented()); //判断是否调用了preventDefault()方法 。即:判断是否阻止了#a_linkB元素的click事件的默认行为  打印出:true
            alert(e.isPropagationStopped()); // 判断是否调用了stopPropagation()方法。即:判断是否阻止了#a_linkB元素的click事件冒泡 //打印出:true
        })



        //--------------------------【3】stopImmediatePropagation() 取消事件冒泡,并取消该事件的后续事件处理函数

        $("#d").click(function () {
            alert("我是D");  //测试冒泡
        })

        $("#e").click(function (e) {
            e.stopImmediatePropagation(); //当我使用了这段代码后,下面那段$("#e").click(function () { alert("我还是E") }) 代码就不会再执行了。 而且也不会再执行$("#d").click(function () { alert("我是D");}) 这段代码了。因为stopImmediatePropagation()的作用就是阻止事件冒泡,【所以它就阻止了$("#d").click(function () { alert("我是D");})这段代码的执行】。  并且阻止事件的后续的处理函数【而下面那段$("#e").click(function () { alert("我还是E") }) 代码就是当前事件的后续事件。所以就又被阻止了】
            alert("我是E");

            alert(e.isImmediatePropagationStopped());//判断是否调用了stopImmediatePropagation()方法
        })

        $("#e").click(function (e) { //如果上面的那个函数使用了stopImmediatePropagation();方法,我将不会被执行到。(注意:我们都是#e元素的click事件哦,如果不是同的元素是不起作用的) 
            alert("我还是E")           
        })

    })
</script>



事件冒泡的顺序

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-1.11.2.js"></script>
</head>
<body>
   <button>从我开始冒泡</button>
</body>
</html>
<script type="text/javascript">
    $("body").click(function () {
        alert("我是body");
    })
    $(document).click(function () {
        alert("我是document");
    });
    $(window).click(function () {
        alert("我是window");
    })
    $("button").click(function () {
        alert("我是button");
    })
 
</script>


首先弹出:我是button  然后弹出 我是body  然后弹出 我是document 最后弹出 我是window

说以冒泡的顺序就是:

button >body >document >window


没有更多推荐了,返回首页