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

Question

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

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

jQuery 示例函数:

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

此处发生的情况是，即使我单击子层，该函数也会运行。我应该如何设置才能使只有 child 周围的区域受到影响？

Answer 1

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

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