单击外部（父项）关闭 div

Question

这不是 Whosebug 上的新问题，但我尝试了所有方法都没有成功。

我用两个 div 创建了一个 "popup"。父级是背景，子级是弹出内容。我想在用户点击背景（父级）时隐藏弹出窗口。

这听起来对我来说也非常容易，但我做不到。这是我的代码和我尝试过的代码（它的工作方式与我想要的完全相反）：

let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');

button.onclick = () => {
 popup.style.display = 'block';
 content.onclick = e => {
   if(e.target !== this) {
     popup.style.display = 'none';
    }
  }
}

.popup {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  display: none;
}

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 25%;
  min-width: 470px;
  border-radius: 4px;
}

<button>
Open Popup
</button>
<div class="popup">
  <div class="popup-content">
    <h3>Popup Title</h3>
    <p>Popup Text</p>
  </div>
</div>

有人可以帮助我吗？

Answer 1

您应该将这两个事件分开并将点击附加到 window，这样您就可以检测 popup-content 之外的点击，例如：

let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');

button.onclick = () => {
  popup.style.display = 'block';
}

window.onclick = e => {
  if (e.target === popup) {
    popup.style.display = 'none';
  }
}

.popup {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 25%;
  min-width: 470px;
  border-radius: 4px;
}

<button>
Open Popup
</button>
<div class="popup">
  <div class="popup-content">
    <h3>Popup Title</h3>
    <p>Popup Text</p>
  </div>
</div>

Answer 2

你可以尝试这样的事情：

而不是添加 EventListner 来关闭按钮上的 div，您需要将其添加到 document 上。并在 target 上测试是否不是你的按钮，就像这样：

    let popup = document.querySelector('.popup');
    let button = document.querySelector('button');



    // Event that hide the popin if the click happen out popin
    function closeHandler(e) {
        if (e.target !== popup) {
            // We remove the event for better perfermance
            removeCloseListner();
            // We hide the popin
            popup.style.display = 'none';
        }
    }

    // Call this function when you open your popin popin
    function addCloseLitnerToDocument() {
        document.addEventListener("click", closeHandler);
    }

    function removeCloseListner() {
        document.removeEventListener("click", closeHandler)
    }

    // Add listner to Open Popin
    button.onclick = (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    // when popin is open
                    // Add listner to the document
                    // And show the popin
                    popup.style.display = 'block';
                    addCloseLitnerToDocument();
                }

单击外部（父项）关闭 div

Close div with click outside (parent)

html

javascript

popup

onclick

onclicklistener