javascript - 点击页面任意位置关闭div

Question

我有一个覆盖 div，当我点击一个 DOM 元素时它会淡入。当我点击页面上的任何地方(除了 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 语句。