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

我正在创建一个灯箱而不使用 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();
  }
});

最佳答案

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

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

关于javascript - 在子 div 外部单击时关闭灯箱，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29440518/