javascript - 检测到 "empty"区域的点击

Question

假设我们有下一个 html/css:http://jsfiddle.net/rbDKm/2/

<div id="header">header</div>
<div id="content">
    <div class="actions">
        <div class="actions-row">
            <div class="action ">home</div>
            <div class="action ">search</div>
            <div class="action ">settings</div>
        </div>
        <div class="actions-row">
            <div class="action">...</div>
            <div class="action">...</div>
            <div class="action">...</div>
        </div>
    </div>
</div>
<div id="footer">footer</div>

我需要的是检测在“空白”区域上进行的任何点击。 在提供的 fiddle 中，空白区域将是一切，具有白色或橙色。

有什么技术/方法可以做到这一点吗？

Answer 1

根据您现在的标记，我认为这意味着您需要检测任何 div.action、#header 之外的点击> 或#footer。

为此，您需要在 body 上 Hook click，然后查看到达 body 所需的路径:

document.body.addEventListener("click", function(e) {
    var elm = e.target;
    while (elm !== document.body) {
        if (elm.id === "header" || elm.id === "footer") {
            return;
        }
        if (elm.tagName.toUpperCase() === "DIV" && /(?:^| )action(?:$| )/.test(elm.className)) {
            return;
        }
        elm = elm.parentNode;
    }
    // If we got here, it's on one of the desired areas
});

您可以执行几种变体。例如，您可以使用 classList 而不是 className.match在现代浏览器上。现代浏览器还提供 Element#closest您可以使用它来代替循环。

或者，您将 click Hook 到 body 上，并将 click Hook 到相关的其他元素上，并防止点击传播:

function stopTheEvent(e) {
    e.stopPropagation();
}
document.body.addEventListener("click", function(e) {
    // It's one of the desired areas
});
var list = document.querySelectorAll("#header, #footer, div.action");
var index;
for (index = 0; index < list.length; ++index) {
    list[index].addEventListener("click", stopTheEvent);
}

...但这看起来更困惑。

---

注意:在上面，我没有考虑到 IE8 缺少 addEventListener。如果您需要支持 IE8，请查看 attachEvent("onclick", ...) 并使用 window.event.returnValue = false; 停止传播(或使用将这些东西抽象出来的库)。