javascript - 覆盖内容周围的可点击区域

Question

这可能是一个简单的解决方案，但我无法理解它。我想要做的是制作一个带有可点击子层的覆盖层，而不为子层分配任何交互。像这样——

<div class="overlay">
    <div class="content">Lorem ipsum dolor.</div>
</div>

jQuery 示例函数：

$('.overlay').click(function() {
    $(this).hide();
});

这里发生的是，即使我单击子层，该函数也会运行。我应该如何设置，以便只有孩子周围的区域受到影响？

score 6 · Accepted Answer

您可以通过以下方式检查点击目标e.target

$('.overlay').click(function(e) {
    if (!$(e.target).is('.content')) {
        $(this).hide();
    }
});

score 3 · Accepted Answer

$('.content').click(function(e) {
    e.stopPropagation();
    alert('child');
});

JSFiddle </p>

score 1 · Accepted Answer

1

创建示例，单击内容防止隐藏操作示例

于 2012-09-29T14:27:11.300 回答

3 回答 3