javascript - 单击页面中的任意位置以关闭 div

Question

当我单击 DOM 元素时，我有一个会淡入的覆盖 div。当我单击页面上的任何位置（除了 div 本身）时，我希望能够关闭它，但它不起作用。这是我的代码：

    //Script for showing the DIV called overlay.
       <script>
        $(function() {
            $('#loginfooter').click(function(){
                $('#overlay').fadeIn(200,function(){
                    $('#box').animate({'top':'20px'},'slow');


                });
                return false;
            });
            $('#boxclose').click(function(){
                $('#box').animate({'top':'-800px'},500,function(){
                    $('#overlay').fadeOut('fast');
                });
            });


        });
    </script>

//Script for hiding the div after clicking anywhere..
    <script>
        $(document).ready(function(){
            $('#overlay').on('click',function(ev){
                var myID = ev.target.id;
                if(myID!=='overlay'){
                    $('#box').animate({'top':'-800px'},500,function(){
                        $('#overlay').fadeOut('fast');
                    });
                }
            });
        });


    </script>

Answer 1

只需替换这个：

$('#overlay').on('click', function (ev) {

有了这个

$(document).on('click', function (ev) {

然后再试一次....

实际上，当您单击overlay元素时，myID变量值始终为== 'overlay'. 因此，它永远不会进入 if 语句。

Answer 2

演示 1

$(document).on('click',function(e){
    if(!$(e.target).closest('#overlay').length)
        $('#overlay').hide();
});

不使用任何委托事件的其他可能性：

演示 2

$('#overlay').on('blur', function (e) {
    $(this).hide();
});

即使您会看到大多数人使用第一种方法，使用第二种方法将避免必须使用任何更好的 IMO 委托事件。您只需在打开或添加到 DOM 时将焦点设置在覆盖上，具体取决于您的具体情况。

Answer 3

这对你有用吗：jsfiddle？

我改变了这个：

if(myID!=='overlay'){

对此

if(myID=='overlay'){

这样您就可以定位覆盖而不是框。