jquery - 使用 e.target == this 来指定 hitbox

Question

我在我的网络应用程序上创建了一个弹出窗口，我使用了一些 jQuery 让它在特定位置被点击时淡入淡出。我稍微工作的一个具体功能是，如果单击背景而不是框本身，应用程序将关闭。

$("#fixedHoverBg").click(function(e){
    if(e.target == this)
    {
        $("#fixedHoverBg").fadeOut("slow");
    }
});

当在弹出框上方或下方而不是左侧或右侧单击背景时，此方法效果很好。奇怪的是，盒子周围没有容器，所以它不可能是另一个干扰背景点击的元素。

这是我在 HTML 中的 div 结构:

<div id='fixedHoverBg'>
<center>
    <div id='selectorWindow'>
        <!-- Content in here -->
    </div>
</center>

CSS:

#fixedHoverBg {
    position: fixed;
    background - color: rgba(255, 255, 255, 0.85);
    z - index: 200000;
    width: 100 % ;
    height: 100 % ;
    top: 0;
    left: 0;
    display: none;
}

#selectorWindow {
    width: 730px;
    height: 600px;
    background: radial - gradient(ellipseatcenter, rgba(87, 179, 237, 1) 0 100 % ;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#57b3ed', endColorstr = '#328ee0', GradientType = 1);
    margin - top: 90px;
    border: 5px solid#ffae43;
    box - shadow: 0 0 0 6px white,
    0 0 20px 5px rgba(0, 0, 0, 0.4);
    border - radius: 5px;
    position: relative;
    display: block;
}​

奇怪的是，我似乎看不出是什么导致了这种奇怪的点击干扰!

Answer 1

你不应该使用过时的 <center>标签。它在弹出窗口的内容周围创建一个 block 元素，当您单击内容的左侧或右侧时，您看不到该元素，但它位于您点击的内容上。

用一些 css 替换它，一切都应该没问题:

#selectorWindow {
    margin-left: auto;
    margin-right: auto;
    /* ... */
}

演示:http://jsfiddle.net/Qs4wX/