javascript - 单击子 div 外部关闭灯箱

Question

我在不使用 jquery 插件的情况下创建了一个灯箱，现在我试图通过单击 close 按钮或单击白色区域之外的任何其他位置来关闭它 (.white_content)
<强> Jsfiddle Example

<button onclick="document.getElementById('lightbox').style.display='inline';">
    Show lightbox
</button>

<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
    <div class="white_content">
        <a href="javascript:void(0)" onclick="document.getElementById('lightbox').style.display='none';" class="textright">Close</a>
            <p>Click anywhere to close the lightbox.</p>
            <p>Use Javascript to insert anything here.</p>
    </div>
</div>
<!-- LIGHTBOX CODE END -->

虽然不是我想要的那样。我希望它仅在我单击灯箱的深色区域而不是白色容器 (.white_content) 时关闭，我听说使用 event.propagation 可能是一件坏事，所以这就是我关闭灯箱的方式

$(document).on('click', function(event) {
  if (!$(event.target).closest('button').length) {
    $(".lightbox").hide();
  }
});

Answer 1

你可以像下面这样改变你的条件

$(document).on('click', function(event) {
    if ($(event.target).has('.white_content').length) {
        $(".lightbox").hide();
    }
});