3.点击按钮,盒子显示,点击页面任何一个地方,盒子隐藏(阻止事件的冒泡,原生js)

<body>
    <!-- 需求:点击按钮,盒子显示,点击页面任何一个地方,盒子隐藏 -->
    <button>点击</button>
    <div class="box">1</div>
</body>
<style>
      .box{
          width: 100px;
          height: 100px;
          background-color: brown;
      }  
</style>
<script>
    var btn = document.getElementsByTagName('button')[0]
    var box = document.getElementsByClassName('box')[0]
    /*想象中的实现方法(不能实现,因为事件有默认冒泡行为,当点击btn的时候,事件会冒泡到document上,所以只会隐藏,不会显示了)
    btn.onclick=function(ev){
        box.style.display = 'block'
    }
    document.onclick=function(ev){
       box.style.display = 'none'
    }*/


    // 所以要阻止btn的冒泡行为
    // 如果要处理浏览器的兼容问题的话,封装一个函数阻止冒泡行为
    function stopP(ev){
        if(ev.stopPropagation){
            ev.stopPropagation() //标准浏览器
        }else{
            ev.cancelBubble = true //IE8及以下
        }
    }
    btn.onclick=function(ev){
        box.style.display = 'block'
        var ev = ev||event   //事件对象(IE和谷歌:是全局的event对象;火狐:是事件函数的第一个参数)
        stopP(ev)
    }
    document.onclick=function(ev){
       box.style.display = 'none'
    }
</script>
posted @ 2021-02-04 11:06  sunshineG  阅读(789)  评论(0编辑  收藏  举报