除非单击特定元素，否则会触发模糊事件

Question

我有三个搜索类别（参见第一张图片）。用户选择一个，我会在类别的空间中显示与该主题对应的搜索输入（参见第二张图片）。我会自动将注意力集中在 jQuery 的输入上，以便用户可以轻松地开始输入。如果用户改变主意并模糊输入，我会将其隐藏并再次显示三个类别。

如果用户单击输入进行搜索，这一切都非常有效，但我也希望允许他们能够单击搜索输入字段旁边的“执行”按钮。问题是，如果他们尝试单击“执行”按钮，则输入会被模糊，然后隐藏，并且提交单击永远不会被触发（我无法在单击此元素时取消绑定模糊事件，因为它永远不会被触发 - 首先会触发模糊）

那么有没有办法执行绑定到模糊事件的函数（隐藏 div）

除非使用 jQuery 或 JavaScript 单击此“go”元素？

Answer 1

您有多种选择：

1. 只有当焦点移至其容器之外的某个位置时，您才能隐藏模糊输入，因此，如果焦点移至“Go”按钮，则根本不会隐藏输入。

2. 您可以设计代码并将搜索问题作为 ajax 调用而不是表单提交来触发。

3. 您可以在简短的

   setTimeout()

   之后隐藏模糊的输入，这使表单提交有机会在隐藏之前发送。

Answer 2

不要将模糊事件放置在输入上，而是将模糊事件放置在同时容纳输入和 Go 按钮的容器上。

Answer 3

我知道这是一个老问题，但在搜索此问题时会弹出。

您可以在模糊事件上使用

relatedTarget

 属性

来检查您是否单击了特定元素来触发模糊。

这是一个普通的 JS 示例：

const input = document.getElementById("you-input-id-here");
const button = document.getElementById("your-button-id-here");

function handleBlurEvent(event) {
    if (event.relativeTarget === button) {
        // You clicked the button.
    }
    else {
        // You clicked something else.
        // Hide search input, etc.
    }
}

input.addEventListener("blur", handleBlurEvent);