Javascript 如何创建可与交互的自动显示弹出窗口

在我们的应用程序中，我们有一个持久的搜索框，每当用户集中在搜索框中时，我们都希望显示一个帮助弹出窗口。当用户提交搜索或聚焦搜索框时，弹出窗口应自动隐藏。这一部分非常简单，我只是使用focusin和focusout事件来显示和隐藏弹出窗口，正如您所期望的那样。您可以在下面看到我们的工作原理：

问题 事情变得棘手的地方是，弹出窗口的内容是交互式的，单击弹出窗口中的任意位置将触发focusout事件，关闭弹出窗口。我已经设法通过检测他们何时点击弹出窗口并抑制close语句来绕过这个问题。这允许用户与弹出窗口进行鼠标交互，但其本身会产生新问题。因为焦点不再在搜索框上，如果用户单击弹出窗口外的任何位置，这不会像通常在用户与弹出窗口交互之前那样触发focusout事件并关闭弹出窗口

---

因此，我正在寻找解决方法，以便用户选择搜索框时弹出窗口会显示出来，但仍能与之交互，但当用户单击除弹出窗口或搜索框以外的任何位置时，弹出窗口仍会关闭。

这里您有另一个想法。您可以添加两个事件监听器（在调出焦点和离开列表时）或侦听另一个元素，该元素应位于搜索和列表的周围。以下是一个例子：

示例html：

<div id="container">
    <input type="text" />
    <ul>
        <li>Fancy</li>
        <li>Stuff</li>
    </ul>
</div>

var container = document.getElementById("container");
var list = container.querySelector("ul");

var closeModal = function(event){
   // your check if event.target was in container...
    if(container.contains(event.target))
        return;

    list.classList.remove("open");
    document.removeEventListener("click", closeModal);
}

container.addEventListener("mouseenter", function(event){
    list.classList.add("open");
    document.addEventListener("click", closeModal);
})