Javascript 如何仅在模态外部而不在对话框/内容上单击？

因此，我和我的朋友为谷歌浏览器做了一个扩展，对于大多数功能（如日历、设置等），我们打开一个模式，这样我们就不必重定向到另一个页面。我们试图在您单击内容外部时关闭模式。这里有一个小的标记屏幕截图，让你了解我在说什么

我希望能够通过在白色区域外单击来关闭模式。当前，即使我在白色区域内单击，它也会关闭。我几乎什么都试过了，包括

stopPropagation（）

，

指针事件：无，并禁用jquery。他们中没有一个因为我不知道的原因而工作。我猜Chrome扩展有些奇怪。
以下是我到目前为止的一些代码：

    function calendar() {
      document.getElementById("calendmodal").style.display = "block";
    }

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("calendicon").addEventListener("click", calendar);
  document.getElementById("calendmodal").addEventListener("click", closeModal);
  document.getElementById("calendmodal").addEventListener("click", function(event) {
    event.stopPropagation();
  });  
});

和HTML：

<div class="icons" id="icons_calendar">
        <img src='https://preview.ibb.co/jE76Bm/calendar.png' alt="calendar" border="0" id="calendicon"/>
      </div>
    <div id=calendmodal class="generalmodal">
      <div class="modal-content" id="calendcontent">
        <iframe src="https://calendar.google.com/calendar/embed?src=googleapps.wrdsb.ca_ptpdj55efmhg1nb89ruc15fi3k%40group.calendar.google.com&ctz=America%2FToronto" style="border: 0" width="800" height="600" frameborder="0" scrolling="no" visibility="hidden" id="calendiframe"></iframe>
        <p id=infostuff>For a more extensive calendar and<br>more school tools, visit <a href="http://jam.wrdsb.ca">The SJAM Website</a>.</p>
      </div>
    </div>


有关更广泛的日历和更多学校工具，请访问

我不确定我做错了什么，我不知道如何在扩展中执行此操作。
在您以前的尝试中，您在哪里执行了
事件.stopPropagation（）
？它不包括在您的代码示例中

您需要做的是防止
#calendmodal
上的
click
事件冒泡DOM并触发其事件处理程序关闭模式对话框的
主体（或另一个容器元素）上的click事件

您可以这样做：

document.getElementById("calendmodal").addEventListener("click", function(event) {
    event.stopPropagation();
});

我不知道您是如何显示模态对话框的，但我对这个问题的处理方法是这样的（您可以根据具体情况调整它）：

我有一个透明的
容器，它占据了整个屏幕，在它里面，我使用CSS定位模式对话框。比如：

<div id="container" style="position:fixed;top:0;bottom:0;left:0;right:0;display:none">
    <div id="myModal" style="position:absolute;width:300px;height:200px;left:100px;top:100px">
        <!-- Here goes my content -->
    </div>
</div>

function openModal(){
  document.getElementById("container").style.display = "block";
}

要在单击透明背景而不是对话框时关闭它，我有：

document.getElementById("container").onclick = function(event) {
  if (event.target === this) {
    this.style.display = "none";
  }
};

我之前尝试过
event.stopPropagation
，但它不起作用，所以我临时删除了它。我将尝试这种格式。我尝试了您所说的，但现在无论我在哪里单击，它都不会关闭模式。@RohanShetty您可能在错误元素的事件处理程序中使用了它<必须在
#calendmodal
@RohanShetty的
单击事件处理程序中调用code>event.stoppropigation（）
。请更新原始问题中的代码示例。如果你不提供你写的代码，我不能提供建议。更新的代码。你是说它需要在函数
日历
中吗？我不能使用上面的格式，因为它在扩展中不起作用。我必须在
DOMContentLoaded
函数下添加一个事件侦听器。好的，我稍微使用了您的代码，但做了一些修改。我阅读了很多关于事件侦听器的内容，并制作了
document.getElementById（“calendmodal”）.addEventListener（“单击”，函数（事件）{if（Event.target！==this）return；document.getElementById（“calendmodal”）.style.display=“none”}）我会将其标记为正确，因为它确实对我有所帮助。@RohanShetty您可以用较短的代码实现相同的功能：
document.getElementById（“calenmodal”）.addEventListener（“单击”，函数（事件）{if（event.target==this）this.style.display=“none”}）。