在vue自定义多选组件中，当需要检测组件整体失去焦点以关闭选项列表时，使用`blur`事件可能无法达到预期效果，尤其是在组件内部输入框被聚焦后。这是因为`blur`事件不具备事件冒泡特性。本教程将详细解释为何`blur`不适用，并推荐使用`focusout`事件，它能够正确地在父元素上捕获子元素或父元素本身失去焦点的事件，从而实现组件焦点管理的需求。
理解组件焦点管理挑战
在开发复杂的ui组件，如自定义多选下拉框时，一个常见的需求是当用户点击组件外部区域时，自动关闭下拉选项列表。这通常通过监听组件的焦点丢失事件来实现。然而，在组件内部包含可交互元素（如输入框）时，如何正确判断“组件整体”是否失去焦点，而非仅仅是内部某个元素失去焦点，是一个容易混淆的问题。
考虑一个多选组件，它包含一个输入框用于搜索和显示已选项目，以及一个下拉列表显示可选项目。当用户点击输入框，然后点击组件外部时，我们希望下拉列表关闭。但如果用户点击输入框，然后点击下拉列表中的某个选项，我们不希望列表关闭，因为用户仍在与组件交互。
blur 事件的局限性
在dom事件模型中，blur事件在元素失去焦点时触发。然而，blur事件的一个关键特性是它不冒泡。这意味着，如果一个子元素失去了焦点，它的blur事件只会在该子元素上触发，而不会向上层父元素传播。
立即学习“前端免费学习笔记（深入）”；
<div @blur="showOptions = false" :tabindex="tabIndex"> <!-- ... 其他组件内容 ... --> <input type="text" v-model="searchInput" /> <!-- ... 选项列表 ... --> </div>
当用户点击input字段，然后点击组件外部时，input字段会失去焦点。此时，input元素会触发一个blur事件。但由于blur事件不冒泡，div元素上监听的@blur事件永远不会被触发。因此，showOptions = false这条逻辑也就无法执行，导致下拉列表无法关闭。
为了让父元素能够感知到其内部任何子元素失去焦点的情况，我们需要一个具有冒泡特性的焦点事件。
focusout 事件：正确的解决方案
focusout事件是解决上述问题的理想选择。与blur事件不同，focusout事件会冒泡。当元素本身或其内部的任何子元素失去焦点时，focusout事件都会在元素上触发，并且会向上冒泡到其祖先元素。
这意味着，将@focusout事件监听器放置在组件的根容器上，可以有效地检测到组件整体何时失去了焦点。
示例代码：使用 focusout 修复焦点问题
要修正多选组件的焦点管理行为，只需将父元素上的@blur事件替换为@focusout：
<template> <div class="flex flex-col relative w-full"> <span v-if="label" class="font-jost-medium mb-2">{{ label }}</span> <div> <!-- 将 @blur 替换为 @focusout --> <div @focusout="showOptions = false" :tabindex="tabIndex"> <div class="border border-[#EAEAEA] bg-white rounded-md flex flex-col w-full" > <div v-if="selectedOptions.length" class="flex flex-wrap px-4 py-2 border-b gap-2" > <div v-for="option in selectedOptions" class="border bg-secondary rounded-full py-1 px-2 flex items-center" > <span>{{ option.text }}</span> <vue-feather type="x" class="h-3 w-3 ml-1.5 cursor-pointer" @click="onDeleteOption(option)" /> </div> </div> <div class="flex flex-row justify-end items-center px-4 cursor-pointer" :class="selectedOptions.length ? 'py-2' : 'p-4'" @click="showOptions = !showOptions" > <MagnifyingGlassIcon class="h-5 w-5 mr-2" /> <input class="focus:outline-0 w-full" type="text" v-model="searchInput" /> <vue-feather type="chevron-down" class="h-5 w-5" /> </div> </div> <div v-if="showOptions && optionsMap.length" class="options-list"> <ul role="listbox" class="w-full overflow-auto"> <li class="hover:bg-primary-light px-4 py-2 rounded-md cursor-pointer" role="option" v-for="option in optionsMap" @mousedown="onOptionClick(option)" > {{ option.text }} </li> </ul> </div> <div id="not-found" class="absolute w-full italic text-center text-inactive-grey" v-else-if="!optionsMap.length" > No records found </div> </div> </div> </div> </template> <script lang="ts"> import { defineComponent, PropType, ref, watch } from "vue"; import { IconNameTypes } from "@/types/enums/IconNameTypes"; import { appIcon } from "@/components/base/index"; import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline"; export default defineComponent({ name: "AppAutocomplete", components: { AppIcon, MagnifyingGlassIcon, }, props: { modelValue: { type: String, }, label: { type: String, default: "", }, tabIndex: { type: Number, default: 0, }, options: { type: Array as PropType<{ text: string; value: string }[]>, required: true, }, }, setup(props, { emit }) { const showOptions = ref(false); const optionsMap = ref(props.options); const selectedOptions = ref<{ text: string; value: string }[]>([]); const searchInput = ref(""); watch(searchInput, () => { optionsMap.value = props.options.filter((option1) => { return ( !selectedOptions.value.some((option2) => { return option1.text === option2.text; }) && option1.text.toLowerCase().includes(searchInput.value.toLowerCase()) ); }); sortOptionsMapList(); }); const onOptionClick = (option: { text: string; value: string }) => { searchInput.value = ""; selectedOptions.value.push(option); optionsMap.value = optionsMap.value.filter((option1) => { return !selectedOptions.value.some((option2) => { return option1.text === option2.text; }); }); sortOptionsMapList(); emit("update:modelValue", option.value); }; const onDeleteOption = (option: { text: string; value: string }) => { selectedOptions.value = selectedOptions.value.filter((option2) => { return option2.text !== option.text; }); optionsMap.value.push(option); sortOptionsMapList(); }; const sortOptionsMapList = () => { optionsMap.value.sort(function (a, b) { return a.text.localeCompare(b.text); }); }; sortOptionsMapList(); // 移除或调整此处的全局点击监听器，因为它可能与focusout逻辑冲突或不必要 // document.addEventListener("click", () => { // console.log(document.activeElement); // }); return { showOptions, optionsMap, searchInput, selectedOptions, IconNameTypes, onOptionClick, onDeleteOption, }; }, }); </script> <style scoped lang="scss"> .options-list, #not-found { box-shadow: 0 0 50px 0 rgb(19 19 28 / 12%); @apply border border-[#EAEAEA] rounded-md p-4 mt-1 absolute bg-white z-10 w-full; } ul { @apply max-h-52 #{!important}; } </style>
通过将@blur=”showOptions = false”更改为@focusout=”showOptions = false”，当组件内部的input字段失去焦点，并且焦点转移到组件外部的任何元素时，div上的focusout事件就会触发，从而正确地关闭选项列表。
注意事项与最佳实践
- tabindex的重要性：为了让非表单元素（如div）能够接收焦点并触发焦点事件（包括focusout），它们必须具有tabindex属性。在上述代码中，父级div已经设置了:tabindex=”tabIndex”，这是正确的做法。tabIndex的值通常为0（可聚焦但按文档顺序）或-1（可聚焦但不可通过Tab键聚焦）。
- mousedown与focusout的交互：在选项列表中的<li>元素上使用@mousedown事件而不是@click事件是一个良好的实践。mousedown事件在用户按下鼠标按钮时触发，而click事件在mousedown和mouseup都发生时触发。在某些情况下，mousedown事件会在focusout事件之前触发。这意味着，当用户点击一个选项时，mousedown会先执行，然后input可能会失去焦点，触发focusout。如果onOptionClick中的逻辑能够及时处理并防止showOptions被focusout立即关闭（例如，通过在onOptionClick中重新设置showOptions = true，或利用事件循环的特性），则可以避免列表瞬间关闭又打开的问题。然而，对于大多数情况，focusout在父元素上，当点击子元素时，如果子元素是可聚焦的，焦点会在子元素上，当子元素失去焦点到外部时，focusout才触发。如果子元素（如li）本身不是可聚焦的，点击它不会改变父容器的焦点状态，除非input已经聚焦。
- 避免全局点击监听器：在某些情况下，开发者可能会尝试使用document.addEventListener(‘click’, …)并在回调中检查点击目标是否在组件外部。虽然这种方法也能实现类似功能，但它通常比focusout更复杂，更容易引入bug（例如，需要处理事件冒泡和阻止默认行为），并且可能与组件内部的焦点管理逻辑冲突。在大多数需要检测组件整体焦点丢失的场景中，focusout是一个更简洁、更语义化的解决方案。
- 事件顺序：当焦点从一个元素转移到另一个元素时，事件的触发顺序通常是：blur (旧元素) -> focusout (旧元素，冒泡) -> focus (新元素) -> focusin (新元素，冒泡)。理解这个顺序有助于调试和设计复杂的焦点管理逻辑。
总结
在Vue自定义组件中处理焦点丢失事件时，选择正确的事件至关重要。blur事件因其不冒泡的特性，不适合用于检测父级容器的整体焦点丢失。相反，focusout事件因其冒泡特性，能够完美地解决这一问题，允许父元素感知到其内部任何子元素或自身失去焦点的事件，从而实现准确的UI行为控制，如自动关闭下拉选项列表。通过将@blur替换为@focusout并确保父元素具有tabindex，可以构建出更健壮、用户体验更佳的自定义组件。