检测输入元素的焦点丢失，而不是onBlur

Question

我在飞镖中实现了自动完成/组合框。我正在使用两个元素，<input type="text">和<ul>用于建议。每当用户离开输入框时，我想通过css样式display: none隐藏。这在输入元素上使用onBlur时有效。

如果用户尝试点击<ul>中的某个项目，则输入会失去焦点，<ul>会在<li>上的点击事件运行之前隐藏。

_listElement = new UListElement();
_textElement = new TextInputElement()
  ..onBlur((e) => setDisplayToNone(_listElement)); // hide element

我注意到jQueryUI实现没有这个问题，我无法弄清楚他们如何检测何时隐藏意见框。见https://jqueryui.com/autocomplete/

我可以使用哪种替代方式隐藏<ul>而不将其隐藏在_textElement.onBlur上？

如果有帮助，这两个元素总是被<div>包裹。我正在寻找一个只有飞镖的解决方案，虽然我可以在飞镖中重建的vanilla-js答案也很受欢迎。

Answer 1

请查看事件序列：

1. input.focus
2. li.mousedown
3. input.blur
4. li.mouseup
5. li.click

因此，您可以设置一个标志变量，在li.mousedown上启用它，在input.blur上进行检查并确定是否需要隐藏列表，然后在li.click上将其关闭