问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

javscript/jquery 点击页面其他地方关闭某个div？

头像
_NullPointer
    458278198

    效果类似这样 ：

    点击一个按钮，弹出一个div，在点击页面其他的位置时，关闭这个div。。。

    目前是通过给document一个点击事件，然后关闭这个div。。（ps： 按钮已经阻止事件冒泡。所以不会触发document的事件）

    但是我有点疑惑这种做法是否正确？

    类似这样的效果还有其他的方式实现吗 ？

    代码

    <div id='a'></div>
<div id='b' class='hide'></div>


javascript:

$("#a").click(function(event){
    $("#b").show();
    event.stop..... （阻止事件冒泡）
});

$(document).click(function(){
$("#b").hide()
});
    jqueryjavascript
    阅读 9.2k
    10 个回答
    得票最新
    头像
    某熊猫桑
      16.1k61547
      ✓ 已被采纳

      大概是这个意思吧：

      <style>
#a {
    width: 100px;
    height: 100px;
    background-color: blue;
}

#b {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.hide {
    display:none;
}
</style>
<div id=a></div>
<div id=b class='hide'></div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).click(tap);
function tap(ev) {
    if (ev.target == $('#a')[0]) {
        $('#b').removeClass('hide');
    } else {
        $('#b').addClass('hide');
    }
}
</script>

      大概思路就是直接挂document的click事件，抓到以后对比下看是不是那个要点击的div就好了。

      “正不正确”其实不是很重要；把功能做出来，能用没bug，那就是正确的。

      头像
      四月的桜和猫
        3.3k53055

        类似于弹窗的那种效果 也就是 点击按钮 显示这个div 点击其他位置 隐藏这个div 没有问题
        你写的没错

        $("#a").click(function(event){
    $("#b").show();
    event.stop..... （阻止事件冒泡）
});
$(document).click(function(){
$("#b").hide()
});
        头像
        listenWind
          27111538
          $(document).click(function (e) {
    var target = e.target;
    if (target && $(target).attr("id") === "a") {
        $("#b").show();
    } else {
        $("#b").hide();
    }
});
          头像
          kikong
            19.1k31320
            <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style>
        body{
            width: 100%;
            height: 500px;
            padding: 0px;
            margin: 0px;
        }
        .outer{
            position: absolute;
            left:20px;
            top:50px;
            width: 200px;
            height: 200px;
            display: none;
            background-color: #cccccc;
            border: 1px solid darkgrey;
            z-index: 2;
        }

        .button{
            position: absolute;
            left:50px;
            top:100px;
            width: 100px;
            height: 50px;
            background-color: #0a6ebd;
            color:#ffffff;
            font-size: 14px;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
    <script>
        $(function(){

            $(document).on("click",function(){
                $('.outer').hide();
            });

            $(document).on("click",".button",function(event){
                event.stopPropagation();
                $('.outer').show();
            });

            $(document).on("click",".outer",function(event){
                event.stopPropagation();
            });
        });
    </script>
</head>
<body>

    <div class="outer"></div>
    <div class="button"><span>Show</span></div>
</body>
</html>
            头像
            jiny
              849321

              $(’body‘).click(function(){
              $("#b").hide()
              });

              头像
              emmy_
                539129

                你在document上添加了一个点击监听事件，那用户点击a标签也会触发这个事件，导致结果就是这个div永远无法显示，你应该监听body点击事件来隐藏

                头像
                dodomonster
                  2.1k51928

                  你的实现方法是正常的思路和解决方法。

                  不过一般的需求不是还会要求点击该div不会隐藏该div吗？这样的话，那么你还就要再在div上写点击阻止冒泡的js哦。

                  头像
                  吃蛋白的外切酶
                    1042

                    一般弹出div最好给后面的页面加遮罩层 给遮罩层绑事件就行了

                    头像
                    zhou_web
                      1.6k21326
                       $(document).on("click", function(ev) {
    var h = $(ev.target);
    if (h.closest("#b").length == 0 && h.closest("#a").length != 1) {
        $("#b").hide()
    }
});
                      头像
                      赵见杰
                        3
                        新手上路，请多包涵

                        我有个更简单的实现方法，点击显示的时候同时加上个透明的遮罩，这样点击遮罩就关闭指定的div

                        撰写回答
                        你尚未登录，登录后可以
                        • 和开发者交流问题的细节
                        • 关注并接收问题和回答的更新提醒
                        • 参与内容的编辑和改进，让解决方法与时俱进
                        推荐问题