在Vue自定义多选组件中，当需要检测组件整体失去焦点以关闭选项列表时，使用`blur`事件可能无法达到预期效果，尤其是在组件内部输入框被聚焦后。这是因为`blur`事件不具备事件冒泡特性。本教程将详细解释为何`blur`不适用，并推荐使用`focusout`事件，它能够正确地在父元素上捕获子元素或父元素本身失去焦点的事件，从而实现组件焦点管理的需求。
理解组件焦点管理挑战
在开发复杂的UI组件，如自定义多选下拉框时，一个常见的需求是当用户点击组件外部区域时，自动关闭下拉选项列表。这通常通过监听组件的焦点丢失事件来实现。然而，在组件内部包含可交互元素（如输入框）时，如何正确判断“组件整体”是否失去焦点，而非仅仅是内部某个元素失去焦点，是一个容易混淆的问题。
考虑一个多选组件，它包含一个输入框用于搜索和显示已选项目，以及一个下拉列表显示可选项目。当用户点击输入框，然后点击组件外部时，我们希望下拉列表关闭。但如果用户点击输入框，然后点击下拉列表中的某个选项，我们不希望列表关闭，因为用户仍在与组件交互。
blur 事件的局限性
在DOM事件模型中，blur事件在元素失去焦点时触发。然而，blur事件的一个关键特性是它不冒泡。这意味着，如果一个子元素失去了焦点，它的blur事件只会在该子元素上触发，而不会向上层父元素传播。
立即学习“前端免费学习笔记（深入）”；
例如，在以下Vue组件结构中：
<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，可以构建出更健壮、用户体验更佳的自定义组件。
