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

Question

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

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

那么有没有办法执行绑定到模糊事件的函数（隐藏 div）除非这个“go”元素是使用 jQuery 或 JavaScript 点击的？

Answer 1

您有多种选择：

1. 只有当焦点移到容器外的某个地方时，才能在模糊时隐藏输入，因此如果焦点移到“开始”按钮，则根本不会隐藏输入。

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

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

Answer 2

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