js点击元素之外的地方隐藏该元素

最新推荐文章于 2024-06-25 22:34:03 发布

cq-wangyong

最新推荐文章于 2024-06-25 22:34:03 发布

阅读量4.8k

点赞数

分类专栏：前端 JS

本文链接：https://blog.csdn.net/qq_30282133/article/details/89633808

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

有时候我们会有这种情况，点击按钮（或者指定元素）显示一个菜单栏，点击按钮和菜单栏外的区域隐藏菜单栏；

主要运用阻止事件冒泡来实现；下面是全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
        *{margin: 0;padding: 0;}
        ul,li{list-style: none;}
        body{min-height: 1000px}
        .app{background: rgba(9,9,9,.1);width:200px;margin: 20px auto;text-align: center;padding: 10px;border-radius: 6px;}
        button{cursor: pointer;}
    </style>
    <div class="app">
        <button>点击切换</button>
        <ul>
            <li>内容1</li>
            <li>内容2</li>
            <li>内容3</li>
        </ul>
    </div>
    <script type="text/javascript">
        //获取相应的dom元素 
        var app=document.querySelector('.app');
        var button=document.querySelector('button');
        var ul=document.querySelector('ul');
        // 第一步 点击按钮 切换 ul的状态
        button.addEventListener('click',function(){
            console.log(ul.style.display)
            if(ul.style.display=='none'||!ul.style.display){
                ul.style.display='block'
            }else{
                ul.style.display='none'
            }
        })
        // 第二步：点击网页隐藏 ul
        document.addEventListener('click',function(){
            ul.style.display='none'
        })
        // 第三步：点击网页会隐藏ul，但是点击按钮不会显示ul，因为事件冒泡的原因，点击按钮也会触发document的点击事件，
        // 这里需要用到阻止事件冒泡，使得点击app元素内的区域不会触发外层的点击事件
        app.addEventListener('click',function(event){
            var e=event||window.event;
            if(e.cancelBubble){
                e.cancelBubble=true;//ie 阻止事件冒泡
            }else{
                e.stopPropagation();// 其余浏览器 阻止事件冒泡
            }
        })
    </script>
</body>
</html>