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

Question

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

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

那么有什么方法可以执行绑定到模糊事件（隐藏 div）的函数，除非使用 jQuery 或 JavaScript 单击此“go”元素？

Answer 1

你有几个选择：

1. 如果焦点已经移到其容器之外的某个位置，则只能在模糊时隐藏输入，因此如果焦点已转到“开始”按钮，则根本不会隐藏输入。

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

3. 您可以在简短后隐藏模糊输入，setTimeout()这使表单提交有机会在隐藏之前发送。

Answer 2

不要将 blur 事件放在输入上，而是将 blur 事件放在同时包含输入和 Go 按钮的容器上。