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>

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

是否有任何技术/方法可以做到这一点？

Answer 1

现在使用您的标记，我认为这意味着您需要检测任何div.action，#header或#footer之外的点击次数。< / p>

为此，您在click上挂钩body，然后查看前往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上挂钩body并在相关的其他元素上挂钩click并阻止点击传播：

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;停止传播（或使用抽象这些内容的库）。

Answer 2

使用事件的“目标”，并检查它的类/ ID

http://jsfiddle.net/yryQ6/

绑定click事件时，使用该事件，获取目标并询问它的类：

$('#content').on('click',function(e){
  if ($(e.target).hasClass('action')) {
    // click on an action
  } else {
    // click on smething that's not an action, in this case, action-row o actions, your empty area
  }
}

编辑：假设你使用jquery，你应该可以使用与javascript事件类似的东西

检测点击“空”区域

2 个答案: