Javascript混淆和模式框

Question

所以我做了一个按钮，当你点击它的时候，一个窗口就会出现，当你点击窗口以外的任何东西时，它就会消失。

我让窗口弹出，它确实改变了背景的不透明度，使其看起来不可见，但由于某种原因，每次我单击窗口底部时，它都会消失，当我在窗口外单击时，它不会消失，而且不透明度永远不会改变回原来的形式。

var modal = document.getElementById('modal-box');

$('.button-func').click(function(){
    $('.filter-box').animate({height:"toggle", opacity:"toggle"}, "slow");
    $('.header').animate({opacity:'.6'});
    $('.topnav').animate({opacity:'.6'});
    $('.add-filter').animate({opacity:'.6'});
    $('.main_home_box').animate({opacity:'.6'});
});

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
        $('.header').animate({opacity:'1'});
        $('.topnav').animate({opacity:'1'});
        $('.add-filter').animate({opacity:'1'});
        $('.main_home_box').animate({opacity:'1'});
    }
}

这是js的新手，如果它有点乱，很抱歉

Answer 1

我认为你的window.onclick事件逻辑有一些问题，如果文档代码上的target==modal不应该执行，并且如果目标！=modal意味着目标在你的框架之外。试试看。

var modal = document.getElementById('modal-box');

$('.button-func').click(function(){
    $('.filter-box').animate({height:"toggle", opacity:"toggle"}, "slow");
    $('.header').animate({opacity:'.6'});
    $('.topnav').animate({opacity:'.6'});
    $('.add-filter').animate({opacity:'.6'});
    $('.main_home_box').animate({opacity:'.6'});
});

window.onclick = function(event) {
    if (event.target != modal) {
        modal.style.display = "none";
        $('.header').animate({opacity:'1'});
        $('.topnav').animate({opacity:'1'});
        $('.add-filter').animate({opacity:'1'});
        $('.main_home_box').animate({opacity:'1'});
    }
}

Answer 2

正如皮尤什建议的那样，window.click应该是这个函数。

function(event) {
if (event.target != modal) {
    modal.style.display = "none";
    $('.header').animate({opacity:'1'});
    $('.topnav').animate({opacity:'1'});
    $('.add-filter').animate({opacity:'1'});
    $('.main_home_box').animate({opacity:'1'});
}
}

仍然存在的问题是，当您单击任意位置时，事件目标并不是您期望的。例如，当您单击模式窗口中的文本框时，事件目标是文本框而不是模式窗口。您必须更改您的逻辑以识别用户是在模式窗口内单击还是在外部单击。event.target != modal不是一个准确的check.You可以使用event.target.path属性来解决这个问题。希望这能有所帮助。欢迎查询。