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

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();
    }
});