javascript - 如何让这个区域显示: none?

Question

我正在制作一个网络应用程序。先看这张图:

现在，您可以看到黄线勾勒出的区域。白色背景的列表是动态的(在搜索栏中输入内容时显示)。现在我想要的是当我点击该区域外的任何地方(搜索输入字段+列表)时，列表应该是display: none。我已经尝试了一些东西，但为此我不得不编写大量代码，因为我分别为不同的 div 做了这个。

另外，我不想在这里粘贴整个代码，因为它太长了。所以我只是向您提供 HTML 以了解这张图片。

<header>
    <div id="headerdiv">
        <div class="headerlogo"><a href="/passwords/home.php"><img src="#" alt="Passwords"></a></div>
        <div class="quit"><img src="#" alt="Quit"></div>
    </div>
</header>
<div id="functions">
    <div id="funcLeft">
        <div id="addbuttonwrap"><input class="addbutton" type="button" value="  +              ADD"></div>
        <div class="heading1">Your saved passwords</div>
        <input class="funcbutton" type="button" value="EMAIL">
        <input class="funcbutton" type="button" value="CAREER">
        <input class="funcbutton" type="button" value="SOCIAL">
        <input class="funcbutton" type="button" value="OTHER">
    </div>
    <div id="funcRight">
        <div id="search">
            <form name="searchform" method="post" action="">
                <input type="text" name="searchinput" placeholder="Enter any keyword">
            </form>
        </div>
        <div class="heading1 heading2">GUIDELINES</div>
        <div class="slides">
            <!--CONTENT-->
        </div>
    </div>
</div>
<footer>
    <div id="footer">
        Copyright: Protected
    </div>
</footer>

注意:在编写答案时，您可以假设任何元素的任何标记名称/类/ID 等，因为代码是不够的。我只想知道该怎么做。

Answer 1

您想在有人点击时隐藏搜索，您可以使用带有 onclick 事件的 Javascript 来实现。

var elementToHide = document.getElementById("searchElement");
window.onclick = function(e){
    if(e.target != elementToHide){
        elementToHide.style.display = "none";
    }
}

当用户点击一个不是的元素时，这将隐藏 elementToHide 中包含的元素(可以是 DOM 中的任何元素)。

变量 e 包含我们在 if 中检查目标元素的点击事件

希望对你有帮助