點選空白處隱藏相應的元素

weixin_33785972發表於2017-09-04

點選空白處隱藏相應的元素

佈局

<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)
        }
    });

這些都可以理解的不在詳解
結束！！！！！！！！

相關文章