JS小练习之实现一个仿select下拉框来解释什么叫事件冒泡以及如何避免冒泡

最新推荐文章于 2022-06-09 16:16:40 发布

曲奇小姐

最新推荐文章于 2022-06-09 16:16:40 发布

阅读量613

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_41586886/article/details/80689914

版权

Javascript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JS事件基础</title>
    <style>
    div{
      padding: 100px;
    }
    #div2{
      width: 400px;
      height:300px;
      background: #ccc;
      display: none;
    }
    </style>
    <script type="text/javascript">
    //document的本质：
    //alert(document.childNodes[0].tagName);  //返回undefied,在IE下返回！，也就是说document是包含整个页面的一个标签


    // window.οnclick=function(){
    //    document.οnclick=function(){   //document.onclick表示的是在整个页面上绑定点击事件，当然也可以用body.onclick
    //                                  //但是当页面元素很少时，body可能撑不起来，所以还是用document最保险
    //     //event只能IE兼容，高版本的Chrome可以用，FF用不了
    //     //event对象：用来获取事件的详细信息：鼠标位置，键盘按键
    //     alert(event.clientX+','+event.clientY); //event.clientX、event.clientY表示鼠标点击时的横纵坐标
    //   };
    //   //如果要FF兼容，必须这样写：(这样写在IE6-8下是用不了的)
    //   document.οnclick=function(ev){
    //     alert(ev.clientX+','+ev.clientY)
    //   }
    //   //如果要都兼容，就这样写：
    //   document.οnclick=function(){
    //     oEvent=event||ev;
    //     alert(oEvent.clientX+','+oEvent.clientY);
    //   }
    // }

    window.οnlοad=function(){
      var oBtn=document.getElementById('btn');
      var oDiv=document.getElementById('div2');

      oBtn.οnclick=function(ev){
        oEvent=event||ev;   //为了兼容IE和FF
        oDiv.style.display='block';
        oEvent.cancelBubble=true;  //阻断冒泡
      };
      document.οnclick=function(){
        oDiv.style.display='none';
      };
    }
    </script>
  </head>
  <body>

    <!-- 演示一下什么叫事件冒泡 :点击最里层的那个红色div时，会一次弹出：red green rgb(204,204,204)
         这个就叫做冒泡：事件不断往上传递；事实上事件冒泡带给我们更多的是麻烦，我们需要探讨的是，
         如何避免冒泡带给我们的阻碍-->
    <!-- <div style="background:#ccc;" οnclick="alert(this.style.background);">
      <div style="background:green;" οnclick="alert(this.style.background);">
        <div style="background:red;" οnclick="alert(this.style.background);"></div>
      </div>
    </div> -->

    <!-- 一下栗子用于演示如何消除冒泡 ,类似于select下拉框：点击按钮，下拉框出现，
           点击页面的其他任何一个地方，下拉框消失-->
    <button type="button" name="button" id='btn'>点我哦</button>
    <div id='div2'></div>
  </body>
</html>