美文网首页
点击空白处隐藏相应的元素

点击空白处隐藏相应的元素

作者: yyshang | 来源:发表于2017-09-04 18:10 被阅读11次

点击空白处隐藏相应的元素

布局

<body>
<div id="box"></div>
<span class="btn">点击此处打开弹出层</span><br>点击空白处关闭弹出层
</body>

控制

  $(function(){
            $(".btn").click(function(event){
                var e=window.event || event;
                if(e.stopPropagation){
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                }
                $("#box").show();
            });
            $("#box").click(function(event){
                var e=window.event || event;
                if(e.stopPropagation){
                    e.stopPropagation();
                }else{
                    e.cancelBubble = true;
                }
            });
            document.onclick = function(){
                $("#box").hide();
            };
        })

或者

 $(document).mouseup(function(e){
        var _con = $('.box');   // 设置目标区域
        if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
            $(".box").hide();
            console.log(1)
        }else{
            console.log(2)
        }
    });

这些都可以理解的不在详解
结束!!!!!!!!

相关文章

网友评论

      本文标题:点击空白处隐藏相应的元素

      本文链接:https://www.haomeiwen.com/subject/nngejxtx.html