17370845950

本文深入探讨了在vue自定义多选组件中处理焦点事件的常见问题。当组件内部输入框失去焦点时，外部容器的blur事件可能无法按预期触发，导致下拉列表无法关闭。核心问题在于blur事件不冒泡，而focusout事件则会冒泡。通过将blur替换为focusout，并确保容器可聚焦，可以有效解决此问题，实现组件外部点击时正确关闭选项列表的功能。

Vue自定义组件中焦点事件的挑战

在开发Vue自定义组件，特别是像多选下拉列表这类需要根据焦点状态控制UI元素（如选项列表）显示与隐藏的组件时，正确处理焦点事件至关重要。一个常见的需求是，当用户点击组件外部时，组件的选项列表应该自动关闭。开发者通常会尝试在组件的根元素上监听blur事件来实现这一逻辑。然而，在某些情况下，尤其当组件内部包含可聚焦的元素（如input字段）时，blur事件的行为可能不尽如人意。

具体来说，如果用户点击组件内部的input字段，然后点击组件外部的任何地方，组件根元素上的blur事件可能不会触发，导致选项列表仍然保持打开状态。这通常是由于对浏览器事件机制的误解造成的。

Blur与Focusout事件的根本区别

要理解上述问题并找到解决方案，我们需要深入理解blur和focusout这两个焦点相关事件的本质区别：

1. blur事件：

   • blur事件在元素失去焦点时触发。
   • 关键特性：不冒泡。 这意味着当一个子元素失去焦点时，它的blur事件不会传播到父元素。父元素只有在它自身直接失去焦点时才会触发blur事件。
   • 在我们的多选组件场景中，当input字段失去焦点时，它会触发自己的blur事件，但这个事件不会向上冒泡到包含input字段的外部div。因此，外部div上的@blur="showOptions = false"不会被触发。

2. focusout事件：

   • focusout事件也在元素失去焦点时触发。
   • 关键特性：冒泡。 这意味着当一个子元素失去焦点时，它的focusout事件会向上冒泡到父元素，直到文档根部。
   • 因此，当input字段失去焦点时，它会触发focusout事件，并且这个事件会冒泡到外部div，从而触发外部div上监听的focusout处理函数。

解决方案：使用focusout事件

鉴于blur事件不冒泡的特性，为了在父元素上捕获其子元素失去焦点的事件，我们应该使用focusout事件。

原始代码中的问题示例：

在这个例子中，@blur="showOptions = false"绑定在外部div上。当用户在input字段中输入后，点击组件外部，input字段会失去焦点。但由于blur事件不冒泡，外部div不会收到这个失去焦点的通知，showOptions也就不会被设置为false。

修正后的代码示例：

将外部div上的@blur事件替换为@focusout。

注意事项与最佳实践

1. tabindex属性： 确保你的父容器（即监听focusout事件的div）具有tabindex属性（例如tabindex="0"或tabindex="-1"）。这使得该div元素能够接收焦点，从而在焦点离开它或其子元素时正确触发focusout事件。在提供的代码中，tabIndex prop已经确保了这一点。
2. 事件冒泡的理解： 深入理解DOM事件的捕获和冒泡阶段对于开发交互式组件至关重要。blur和focus事件不冒泡，而focusin和focusout事件则会冒泡。
3. 用户体验： 使用focusout可以提供更流畅的用户体验，因为无论用户是点击组件内部的可聚焦元素后离开，还是直接点击组件外部，选项列表都能一致地关闭。
4. 可访问性： 正确处理焦点事件对于键盘导航和整体可访问性至关重要。确保组件在没有鼠标的情况下也能完全操作。
5. @mousedown与@click： 在处理选项点击时，如果希望在focusout事件处理函数关闭选项列表之前捕获到点击事件，可以考虑使用@mousedown而不是@click。因为mousedown事件在blur/focusout之前触发，可以避免在点击选项时列表被过早关闭。在示例代码中，选项列表的li元素已经使用了@mousedown，这是一个很好的实践。

总结

在Vue自定义组件中，当需要父元素监听其内部子元素失去焦点的事件时，应优先使用focusout事件而非blur事件。focusout事件的冒泡特性使其能够捕获到子元素失去焦点的通知，从而实现更灵活和可靠的UI交互逻辑。同时，确保父容器具有tabindex属性是实现这一机制的必要条件。通过这些调整，可以显著提升自定义多选组件的用户体验和功能完整性。