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

Question

我正在 dart 中实现 autocomplete/combobox。我为此使用了两个元素，一个 <input type="text"> 和一个 <ul> 作为建议。每当用户离开输入框时，我想通过 css 样式 display: none 隐藏。这在输入元素上使用 onBlur 时有效。

如果用户尝试单击 <ul> 中的项目，输入失去焦点并且 <ul> 在 <li> 上的单击事件为 [=34= 之前被隐藏].

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

我注意到 jQueryUI 实现没有这个问题，我不知道他们如何检测何时隐藏建议框。见 https://jqueryui.com/autocomplete/

我可以使用什么替代方法来隐藏 <ul> 而不是在 _textElement.onBlur 上隐藏它？

如果有帮助，这两个元素总是用 <div> 包裹起来。我正在寻找一个仅限 dart 的解决方案，尽管我可以在 dart 中重建的 vanilla-js 答案也很受欢迎。

Answer 1

请查看事件顺序：

input.focus
li.mousedown
input.blur
li.mouseup
li.click

所以你可以设置一个标志变量，在 li.mousedown 上打开它，在 input.blur 上检查它并决定是否需要隐藏列表，然后在 [=12] 上关闭它=]

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

Detect focus loss for input element, not onBlur

html

javascript

dart

dart-html