如何正确捕获 JavaScript Click 事件以隐藏和显示 Div？

Question

我有 1 个输入区域和 1 个弹出区域，当我点击输入时，弹出窗口会显示，当我点击正文中的其他任何位置（弹出窗口和输入除外）时，我希望隐藏弹出窗口。

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

您可以收听文档click 事件，然后检查单击是否发生在input 区域或其他地方，然后显示或隐藏模式。

由于您的整个可见 div 首先是带有 class="input" 的 div 并且您在其中有输入，因此每当 click 事件不包含输入类时，它应该隐藏模式和虎钳反之亦然。

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>

---

此外，如果在任何情况下，如果 click 事件发生在模态本身或 input 区域之外的任何地方，您想要关闭模态，您可以检查另一个条件以查看 click 事件是否发生在 div 内id="content" 与否。

所以最终的代码应该是这样的：

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>

---

因此，如果您想为模态框内的内容添加另一个侦听器，您可以像这样为其定义另一个事件侦听器：

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

使用 jQuery mouseup 事件 (.mouseup()) 和 target 属性 (event.target) 来检测点击事件并在点击特定元素外部时隐藏 div。

<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>