在香草 javascript 中单击叠加层时如何隐藏模式

Question

I'm trying to figure out how to hide the div which is the overlay only when the overlay is clicked and not any of its children (ie: the content):

modal.addEventListener('click', destroy, false);


function destroy(e) {
    if (e.target.id === overlay.id) {
        window.location.reload(false);
    }
}

Answer 1

Your if condition is working but you don't hide something. For that you could add a class (for example .hidden ) and define for that class display: none .

Working example:

 const modal = document.querySelector('#modal'); const overlay = document.querySelector('#overlay'); modal.addEventListener('click', destroy, false); function destroy(e) { if (e.target.id === overlay.id) { e.target.classList.add('hidden'); } }

 #overlay { height: 50px; background-color: yellow; } p { background-color: red; }.hidden { display: none; }

 <div id="modal"> <div id="overlay"> <p>test</p> </div> </div>