重叠式内容周围的可点击区域

Question

这可能是一个简单的解决方案，但我只是无法解决。 我要做的是使带有子图层的覆盖层可点击，而无需给子图层分配任何交互。 像这样-

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

jQuery示例函数：

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

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

Answer 1

您可以通过e.target查看点击目标

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

Answer 2

尝试使用e.stopPropagation（）; --

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

JSFiddle

Answer 3

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