叠加内容周围的可点击区域

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

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