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

Question

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

 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事件不包含输入 class，它就应该隐藏模态，反之亦然。

 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事件是否发生在id="content"的div内部。

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

 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

使用带有目标属性 (event.target) 的jQuery mouseup事件 (.mouseup()) 来检测单击事件并在单击特定元素外部时隐藏 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>