JavaScript 隐藏点击外部触发器两次

Question

我有这个代码:

完整代码: https://codepen.io/anon/pen/wmLBxW

JavaScript 代码:

function HideOnClickOutside(aContentElement, aFullScreenElement) {
  const outsideClickListener = event => {
    event.preventDefault();
    let isClickInside = aContentElement.contains(event.target);
    if (!isClickInside) {
      aFullScreenElement.classList.toggle("hidden", true);
      removeClickListener();
    }
  };

  const removeClickListener = () => {
    document.removeEventListener("click", outsideClickListener);
  };

  document.addEventListener("click", outsideClickListener);
}

CSS

  #fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: black;
  opacity: 0.5;
}

.hidden {
  display: none;
}

#journal-show-entry {
  display: flex;
  justify-content: center;
  width: 40%;
  height: 60%;
  border: 1px solid #9b6400;
  background-color: #ffffff;
}

HTML

<a href="#" onclick="ShowFullScreenDiv()">Link</a>

<div id="fullscreen" class="hidden">
  <div id="journal-show-entry">
  </div>
</div>

我在这个帖子中发现: How do I detect a click outside an element?

但是就像在我的 CodePen 中一样，它会在添加 EventListener 的同一点击中触发 externalClickListener，从而使 div 在同一点击中再次隐藏自身，因此永远不会显示。

为什么会发生这种情况？

Answer 1

发生的事情是事件正在传播到下一层(隐藏的 div)

添加此内容将解决您的问题:

function ShowFullScreenDiv(event) {
  event.stopPropagation(); // <-- add this
  divFullScreen.classList.toggle("hidden", false);
  HideOnClickOutside(divEntry, divFullScreen);
}

当然，将事件添加到 html 中:

<a href="#" onclick="ShowFullScreenDiv(event)">Link</a>