VueJS点击事件失效：父元素事件优先触发致下拉项无法点击

问题场景 #

正在开发一款从API获取数据并展示下拉联想的搜索输入组件，核心需求如下：

• 输入内容且API返回数据时，展开下拉列表展示结果：
  • 点击列表项，将其设为activeItem并关闭下拉列表
  • 点击组件（输入框+下拉列表）外部时，关闭下拉列表
• 无API数据返回时，输入框作为普通文本框使用

当前遇到的问题：
通过输入框的@focusin和@focusout事件控制下拉列表的显示/隐藏，但点击下拉列表项时，输入框的@focusout会优先触发并关闭列表，导致列表项的@click事件无法执行。调试handleFocusOut方法时发现，无论点击何处，事件参数的e.relatedTarget始终为null。

问题根源 #

下拉列表项属于默认不可聚焦的元素，点击这类元素时，focusout事件的relatedTarget会返回null，无法识别焦点是转移到了组件内部的列表项上，因此触发了下拉关闭逻辑，直接阻断了后续的列表项点击事件。

解决方案 #

给所有下拉列表项添加tabindex="0"属性，让元素变为可聚焦状态。这样点击列表项时，focusout事件的relatedTarget会指向该列表项，此时可以判断焦点仍处于组件内部，维持isFocus = true的状态，确保列表项的@click事件能够正常执行，完成activeItem设置后再关闭下拉列表。

内容的提问来源于stack exchange，提问作者Gaël Duval