Question

我有一个隐藏的div，我用它作为网站上不同功能的叠加层。最初，div设置为display: none。

问题是，当AJAX查询返回时，它将返回一个简单的表单，上面有一个按钮，当我单击按钮提交表单时，它关闭叠加层并且不处理表单，我正在尝试找到解决方法，以便$("body").click(function(e) {仅影响叠加层中innerWrapper div的外部。

非常感谢任何帮助。

HTML：

<div id="overlay" style="display: none"><div id="innerWrapper"></div></div>

CSS：

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}
#overlay #innerWrapper {
    width: 400px;
    margin: 100px auto 0 auto;
    padding: 10px;
    background: #FFFFFF;
    filter: alpha(opacity=100);
    opacity: 1;
    z-index: 10001;
}

现在我正在使用的jQuery代码是：

$("#article").on("click", ".send", function(e) {
    e.preventDefault();
    var vAID = $(this).attr("data-cid");

    // Display overlay
    $("#overlay").css("display", "inline");

    $.ajax(
    {
        url : "ajax.php",
        type: "POST",
        async: false,
        data : {id:1,aid:vAID},
        success: function(data, textStatus, jqXHR)
        {
            $("#overlay #innerWrapper").html(data);
        }
    });

    e.stopPropagation();
});

$("body").click(function(e) {
    $("#overlay").slideUp("fast");
});

Answer 1

您想要检查叠加层内部的元素是否已被点击，或者事件是否超出此上下文。当用户点击文档中的任何位置时，叠加层将始终关闭。将您的点击监听器更改为：

$("body").click(function(e) {
    var $overlay = $("#overlay");

    if( $overlay.has($(e.target)).length < 1)
        $overlay.slideUp("fast");
});

以下是演示：http://jsfiddle.net/utW4V/

e.target是用户点击的元素。当此元素不在叠加层内时，我们可以保存关闭它。

Answer 2

一种方法是收听叠加层上的点击事件（因为它会扩展到视口的宽度）并在所有点击事件到达#innerWrapper时停止传播：

$("#innerWrapper").click(function(e){
  // prevent unhandled clicks within the wrapper from
  // bubbling up
  e.stopPropagation();
});

// either listen on #innerWrapper and delegate events
// or manually add events here:
// e.g. ``$("article").on('click', '.send', function(){ /* ... */ });


// all clicks not within the wrapper will close the overlay
$("#overlay").click(function(e) {
    // handle all other clicks within the overlay
    $("#overlay").slideUp("fast");
});

<强> JSBin

叠加点击互动问题

2 个答案: