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

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