Question

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

我有一个用两个div创建的“弹出窗口”。父级为背景，子级为弹出内容。当用户单击背景（父级）时，我想隐藏弹出窗口。

对我来说，这听起来也非常容易，但我无法实现。这是我的代码，也是我尝试的（它完全按照我想要的方式工作）：

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

2 个答案: