Close div with click outside (parent) [duplicate]

问题

This is not a new problem on stackoverflow, but I've tried everything without success.

I have a "popup" created with two divs. The parent ist the background and the child is the popup content. I want to hide the popup when the user clicks on the background (the parent).

It sounds extremly easy also for me but I can't achieve that. This is my code and what I tried (it works exacly at the opposite way as I want):

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>

Can somebody help me?

回答1:

You should separate both events and attach the click to the window so you can detect the clicks outside of popup-content like :

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>

回答2:

you can try something like this :

instead of adding the EventListner to close the div on the button you need to add it on the document instead. and test on target if is not your button just like this :

    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();
                }

来源：https://stackoverflow.com/questions/51862116/close-div-with-click-outside-parent

标签

javascript

html

onclick

popup

onclicklistener