How to properly Capture JavaScript Click event to Hide and Show a 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>

There's also the `blur` event (triggered when an element loses focus). See how you can listen to it with [pure JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event) and [jQuery](https://api.jquery.com/blur). — double-beep, Jun 11 '20 at 08:24
Does this answer your question? [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — icecub, Jun 11 '20 at 08:46

SMAKSS · Accepted Answer · 2020-06-11T08:53:42.443

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>

score 0 · Answer 2 · answered Jun 11 '20 at 08:25

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>

How to properly Capture JavaScript Click event to Hide and Show a Div?

2 Answers2