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

Question

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

问题

当事情变得棘手的是，弹出窗口的内容是交互式的，弹出窗口中的任何地方都会触发关闭弹出窗口的focusout事件。我已经设法通过检测他们何时点击了弹出窗口并抑制关闭语句来破解我的方式。这允许用户与弹出窗口进行鼠标交互，但是本身会产生新问题。由于焦点不再位于搜索框中，如果用户单击弹出窗口外的任何位置，则不会触发focusout事件并按照正常情况关闭弹出窗口，然后再与它进行交互。

所以我希望为此集思广益，以便弹出窗口会在用户选择搜索框时显示，但仍然可以与其进行交互，但是当他们点击除了弹出窗口或搜索框。

Answer 1

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

http://jsfiddle.net/NicoO/uh37pmys/2/

示例html：

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

一些javascript示例：

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);
})