javascript - jQuery .click 元素背后的元素堆叠错误？

Question

我有一个“灯箱”类似的功能，它只是带来了 2 个像这样的 div：

绿色（一旦工作就不会着色）是单击以关闭登录框的区域。

jsFiddle 代码：http: //jsfiddle.net/bhcGv/8/

当您单击登录框时，它会消失，因为它认为它单击了绿色框。有什么建议么？

Answer 1

你需要 .stopPropagation 方法。

这里更新的jsfiddle：http: //jsfiddle.net/bhcGv/10/

Answer 2

您可以添加此代码

.find('#centeredBox').click(function(e){
        e.preventDefault();
        e.stopPropagation();
return false;
    });

所以你的 document.ready 函数变成了

$(document).ready(function(){
    $("#loginOffBox").click(function(){
        $('#loginOffBox').hide();
          $('#centeredBox').hide();
    }).find('#centeredBox').click(function(e){
        e.preventDefault();
        e.stopPropagation();
return false;
    });
    // other js
});

当您单击居中的 div 时，这应该会停止运行事件。

您也可以将居中的 div 从有色的 div 中取出。那么你不会有事件气泡。

Answer 3

您想修复两个 div 的 z-index。背景 div 的 z-index 应该比弹出 div 小，并且两者都应该具有相对较高的值。

尝试 loginOffBox 的 z-index 为 1000，centeredBox 的 z-index 为 1100，它应该可以正常工作。