时间戳

首页 > 解决方案 > 在容器外单击时模态停止工作

javascript - 在容器外单击时模态停止工作

问题描述

模态已经工作了，当您单击按钮时，它会打开模态，当您单击 x 按钮时，它会关闭模态，但是，我尝试添加
const mainWrapper = document.querySelector(".modal-main-wrapper");逻辑。

我添加它的原因是因为当我单击“容器或模态外”时，它会关闭，但我的模态似乎停止工作。

那么它有什么问题呢？我也尝试将它定位到 body
const closeBody = document.querySelector("body");，但仍然无法正常工作。

const buttonClick = document.querySelector(".button-click");
const modalWrapper = document.querySelector(".modal-wrapper");

buttonClick.addEventListener("click", _ => {
  modalWrapper.classList.add("modal-show");
})

const buttonClose = document.querySelector(".modal-button-close");

buttonClose.addEventListener("click", _ => {
  modalWrapper.classList.remove("modal-show");
})

//The problem starts from here
const mainWrapper = document.querySelector(".modal-main-wrapper");

mainWrapper.addEventListener("click", _ => {
  modalWrapper.classList.remove("modal-show");
})
.button-click {
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 40px;
  color: #ffffff;
}

.modal-wrapper {
  visibility: hidden;
}

.modal-wrapper.modal-show {
  visibility: visible;
}
<body>
  <div class="modal-main-wrapper">
    <button class="button-click">Click me!</button>

    <div class="modal-wrapper">
      <button class="modal-button-close">x</button>
      <p>Hello</p>
    </div>
  </div>
</body>

标签： javascript

解决方案

当您单击按钮时，它还会触发单击父级modal-main-wrapper。为了防止这种情况，您应该使用Event.stopPropagation()

stopPropagation()：Event 接口的方法防止在捕获和冒泡阶段进一步传播当前事件

const buttonClick = document.querySelector(".button-click");
const modalWrapper = document.querySelector(".modal-wrapper");

buttonClick.addEventListener("mousedown", _ => {
  console.log("clicked")
  modalWrapper.classList.add("modal-show");
  console.log(modalWrapper.outerHTML)
  _.stopPropagation()
})

const buttonClose = document.querySelector(".modal-button-close");

buttonClose.addEventListener("click", _ => {
  modalWrapper.classList.remove("modal-show");
  _.stopPropagation(); 
})

//The problem starts from here
const mainWrapper = document.querySelector(".modal-main-wrapper");

mainWrapper.addEventListener("mousedown", _ => {
  console.log('clicked');
  modalWrapper.classList.remove("modal-show");
})
.button-click {
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 40px;
  color: #ffffff;
}

.modal-wrapper {
  visibility: hidden;
}
.modal-show {
  visibility: visible !important;
}
<body>
  <div class="modal-main-wrapper">
    <button class="button-click">Click me!</button>

    <div class="modal-wrapper">
      <button class="modal-button-close">x</button>
      <p>Hello</p>
    </div>
  </div>
</body>

推荐阅读