Javascript 覆盖层可通过其前面的元素单击

我使用的是一个覆盖登录，当用户点击“登录”时，它会出现在所有内容的前面。覆盖层由一个不透明的包装器组成，其中包含一个固定的内部div，用于保存登录表单

以下是html：

<div class="login_wrapper"> 
    <div class="login_info">
        <div class="login_form">
             // form 
        </div>
    </div>
</div>

我希望当用户单击登录信息之外的任何位置时，此覆盖被隐藏

我使用以下JQuery处理此问题：

$(document).ready(function(){
    $(".login_wrapper").click(function(){ 
        $(".login_wrapper").fadeToggle(300);  
    });
});

但是如果使用在覆盖上的任何地方点击，包括中间的窗体，则阻止Login包装，从而阻止窗体进入任何信息。p> 不知何故，点击事件得到了“通过”登录表单和登录信息，浏览器的反应就像点击了登录包装一样

如何解决这个问题，使jQuery代码仅在内部div之外单击覆盖时才适用

---

谢谢

将代码更改为：

$(document).ready(function(){
    $(".login_wrapper").click(function(){ 
        $(".login_wrapper").fadeToggle(300);  
    });
    $(".login_info").click(function(event){
        event.stopPropagation();
    });
});

---

这将阻止click事件冒泡到

.login\u包装器中

。有关

stopPropagation（）

的详细信息，请参阅。

首先，您必须在

\login\u wrapper

中转换

.login\u wrapper

，然后添加以下内容：

$('#login_wrapper').click(function(e) {
    if (e.target.id === "login_wrapper")
    $('#login_wrapper').fadeToggle(300);
});

这将只针对id为

login\u包装器的元素。
希望这对您有所帮助
在click event中尝试使用jQuery中的event.stoppropogation（），因为您的登录表单和登录信息都在您的登录包装器中，所以逻辑上说，当您单击登录表单时，您也会单击登录包装器，因此效果很好。我认为，因为表单是在包装器前面分层的，所以单击事件不会“通过它”传播。不
$('#login_wrapper').click(function(e) {
    if (e.target.id === "login_wrapper")
    $('#login_wrapper').fadeToggle(300);
});