Javascript 通过单击内容区外部关闭GLightbox库

我正在使用GLightbox JS库创建一个公文包库，希望在单击内部元素外部时能够关闭库

我发现了其他类似性质的问题，但我避免使用jQuery，也没有找到一个适合这个特定用例的解决方案。另外，它看起来像我想要的功能是内置的。我只是想访问它

该文档列出了许多选项，并包括一个功能，用于使用默认按钮以外的其他按钮关闭库

他们的文件如下：

库的标记是动态生成的，并遵循以下结构：

<div class="goverlay"></div><!-- background overlay -->
<div class="gcontainer"><!-- main container -->
  <div id="lightbox-slider">
    <div class="gslide">
      <div class="gslide-inner-content"><!-- image/text content -->
        <img src="img/image.jpg" alt="">
      </div>
    </div>
  </div>
</div>

我希望能够单击

.gslide internal content

的外部以关闭库，这是我迄今为止提出的基本想法：

var closeTheGallery = document.getElementsByClassName('.gslide');

closeTheGallery.onclick = function() {
  myLightbox.close();
  e.stopPropagation();
};

我已经尝试了上述代码的多次迭代，目标是各种父元素和子元素，以查看是否有我可以钩住的东西。到目前为止没有运气-任何见解都将受到赞赏-提前感谢。

myLightbox.close（），代码>功能似乎都没有起到任何作用，但提供了一些有用的指导

作为一种解决方法，我添加了一个事件侦听器，用于单击

.current

幻灯片容器，并将其设置为触发再次单击默认的

.gclose

按钮

// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'current')) {
      document.querySelector('.gclose').click();
    }
}, false);

它可能不是最优雅的解决方案，但它完成了任务，并且不会干扰库的现有功能

---

在这里发布代码，以防其他使用GLightbox gallery的人遇到同样的问题

目标是覆盖层

.goverlay

——理想情况下，覆盖层应覆盖整个页面并位于图库下方。（还要在web developer toolbar>控制台中检查myLightbox.close（）方法是否按预期工作）定位

.goverlay

不起作用-如果标记是动态生成的，会有什么不同吗？从技术上讲，在lightbox处于活动状态之前，标记不存在。它不会在控制台中抛出错误，但也不会触发库关闭。好的一点，这很可能是你的问题——你可以尝试下面建议的方法：谢谢！这让我看到了正确的方向。我将为其他可能正在寻找类似产品的人添加解决方案。

// find .current slide item and listen for click
// once click happens, trigger click for the close button
document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'current')) {
      document.querySelector('.gclose').click();
    }
}, false);