《JavaScript学习笔记》：冒泡及取消冒泡

最新推荐文章于 2021-06-07 11:41:53 发布

HelloWorld_EE

最新推荐文章于 2021-06-07 11:41:53 发布

阅读量566

点赞数 1

分类专栏： javascript 文章标签： javascript 冒泡取消冒泡

本文链接：https://blog.csdn.net/u010412719/article/details/51598127

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

《JavaScript学习笔记》：冒泡及取消冒泡

先看一个程序，如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    div {padding:100px;}
    </style>
    </head>

    <body>

    <div style="background:red" onclick="alert('第一层');">
        <div style="background:yellow" onclick="alert('第二层');">
            <div style="background:black" onclick="alert('第三层');"
        </div>
    </div>
    </body>
    </html>

这个程序有三层，有三个div构成，每个div都有一个点击事件，当我们点击最里面的div区域时，不仅会执行第三层div的点击事件，而是执行之后，接着会执行第二层的点击事件，最后会执行最外层的点击事件。这就是事件冒泡。

如何来阻止事件冒泡呢？

有如下的方法：

  var oEvent=ev||event;
  oEvent.cancelBubble=true;

看一个例子，假设我们要实现如下功能：按钮的点击事件控制着一个div的显示和隐藏，同时，当div处于显示状态时，点击document的其它区域时，这个div就应该隐藏。

由于按钮也是处在document上，因此，我们就需要将冒泡取消掉，否则，点击按钮就不能实现显示div。

代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    #div1 {width:100px;height:200px;background:red;display:none}
    </style>
    <script>
    window.onload=function()
    {
        var oBtn= document.getElementById('btn1');
        var oDiv= document.getElementById('div1');

        oBtn.onclick=function(ev)
        {
            var oEvent = ev || event;
            oDiv.style.display='block';
            alert('a');
            oEvent.cancelBubble=true;//取消冒泡,如果没有这一行代码，则当我们点击按钮时，不仅会执行

        };
        document.onclick=function()
        {
            alert('b');
            oDiv.style.display='none';
        };
    };
    </script>
    </head>

    <body>
    <input id="btn1" type="button" value='显示'/>
    <div id="div1">
    </div>
    </body>
    </html>