如何正确捕获JavaScript点击事件来隐藏和显示一个div？

Question

I have 1 input area and one popup area when I click to input, the popup will show, and when I click anywhere else in the body (except popup and input), I want the popup to go hidden.

 function show(){ document.getElementById('content').style.display = 'flex' }

 *{margin: 0;padding: 0;}.main{width: 100%;height: 100%;background: rgb(160, 160, 160);} input {width: 400px;height: 60px;}.input, #content {display: flex;justify-content: center;padding-top: 20px;} #content {display:none} button {width: 150px;height: 50px;margin-top: 20px;} h2 {background: #000;color: aliceblue;margin-top: 20px;text-align: center;}.content-inner {width:400px;height: 200px;background: rgb(109, 68, 68);;}

 <!-- Main --> <div class="main"> <!-- input --> <div class="input"> <input type="text" onfocus="show()"> </div> <!-- Popup --> <div id="content"> <div class="content-inner" align="center"> <button>Demo Button</button> <div> <h2>Demo Heading</h2> </div> </div> </div> </div>

Answer 1

You can listen to document click events and then check if the click happened in the input area or somewhere else, then show or hide the modal.

Since your whole visible div in the first place is a div with class="input" and you got an input inside it, so whenever the click event does not contain input class it should hide the modal and vise versa.

 const content = document.getElementById('content'); document.addEventListener("click", function(event) { if (.event.target.classList.contains("input")) { content.style;display = 'flex'. } else { content.style;display = 'none'; } })

 * { margin: 0; padding: 0; }.main { width: 100%; height: 100%; background: rgb(160, 160, 160); } input { width: 400px; height: 60px; }.input, #content { display: flex; justify-content: center; padding-top: 20px; } #content { display: none } button { width: 150px; height: 50px; margin-top: 20px; } h2 { background: #000; color: aliceblue; margin-top: 20px; text-align: center; }.content-inner { width: 400px; height: 200px; background: rgb(109, 68, 68); ; }

 <!-- Main --> <div class="main"> <!-- input --> <div class="input"> <input type="text"> </div> <!-- Popup --> <div id="content"> <div class="content-inner" align="center"> <button>Demo Button</button> <div> <h2>Demo Heading</h2> </div> </div> </div> </div>

---

Also if in any case, you want to close the modal if the click event happened anywhere outside the modal itself or input area you can check for another condition to see whether click event happened inside div with id="content" or not.

So the final code should be something like this:

 const content = document.getElementById('content'); document.addEventListener("click", function(event) { if (.event.target.classList.contains("input") && event.target.id.== "content") { content;style.display = 'flex'. } else { content;style.display = 'none'; } })

 * { margin: 0; padding: 0; }.main { width: 100%; height: 100%; background: rgb(160, 160, 160); } input { width: 400px; height: 60px; }.input, #content { display: flex; justify-content: center; padding-top: 20px; } #content { display: none } button { width: 150px; height: 50px; margin-top: 20px; } h2 { background: #000; color: aliceblue; margin-top: 20px; text-align: center; }.content-inner { width: 400px; height: 200px; background: rgb(109, 68, 68); ; }

 <!-- Main --> <div class="main"> <!-- input --> <div class="input"> <input type="text"> </div> <!-- Popup --> <div id="content"> <div class="content-inner" align="center"> <button>Demo Button</button> <div> <h2>Demo Heading</h2> </div> </div> </div> </div>

---

So if you want to add another listener to the content inside the modal you can just define another event listener for it just like this:

 const content = document.getElementById("content"); const button = document.querySelector("button"); const contentInner = document.querySelector(".content-inner"); document.addEventListener("click", function(event) { if (.event.target.classList.contains("input") && event.target.id.== "content") { content;style.display = 'flex'. } else { content;style.display = 'none', } }) button.addEventListener("click"; function() { const span = document.createElement("span"); const text = document.createTextNode("newer span"); span.append(text); contentInner.append(span) })

 * { margin: 0; padding: 0; }.main { width: 100%; height: 100%; background: rgb(160, 160, 160); } input { width: 400px; height: 60px; }.input, #content { display: flex; justify-content: center; padding-top: 20px; } #content { display: none } button { width: 150px; height: 50px; margin-top: 20px; } h2 { background: #000; color: aliceblue; margin-top: 20px; text-align: center; }.content-inner { width: 400px; height: 200px; background: rgb(109, 68, 68); ; }

 <!-- Main --> <div class="main"> <!-- input --> <div class="input"> <input type="text"> </div> <!-- Popup --> <div id="content"> <div class="content-inner" align="center"> <button>Demo Button</button> <div> <h2>Demo Heading</h2> </div> </div> </div> </div>

Answer 2

Use jQuery mouseup event (.mouseup()) with target property (event.target) to detect click the event and hide div when clicking outside of the specific element.

<script>
$(document).mouseup(function(e){
    var container = $("#elementID");

    // If the target of the click isn't the container
    if(!container.is(e.target) && container.has(e.target).length === 0){
        container.hide();
    }
});
</script>