在Vue自定义多选组件中，当需要检测组件整体失去焦点以关闭选项列表时，使用`blur`事件可能无法达到预期效果，尤其是在组件内部输入框被聚焦后。这是因为`blur`事件不具备事件冒泡特性。本教程将详细解释为何`blur`不适用，并推荐使用`focusout`事件，它能够正确地在父元素上捕获子元素或父元素本身失去焦点的事件，从而实现组件焦点管理的需求。
理解组件焦点管理挑战
在开发复杂的UI组件，如自定义多选下拉框时，一个常见的需求是当用户点击组件外部区域时，自动关闭下拉选项列表。这通常通过监听组件的焦点丢失事件来实现。然而，在组件内部包含可交互元素（如输入框）时，如何正确判断“组件整体”是否失去焦点，而非仅仅是内部某个元素失去焦点，是一个容易混淆的问题。
考虑一个多选组件，它包含一个输入框用于搜索和显示已选项目，以及一个下拉列表显示可选项目。当用户点击输入框，然后点击组件外部时，我们希望下拉列表关闭。但如果用户点击输入框，然后点击下拉列表中的某个选项，我们不希望列表关闭，因为用户仍在与组件交互。
blur 事件的局限性
在DOM事件模型中，blur事件在元素失去焦点时触发。然而，blur事件的一个关键特性是它不冒泡。这意味着，如果一个子元素失去了焦点，它的blur事件只会在该子元素上触发，而不会向上层父元素传播。
立即学习“前端免费学习笔记（深入）”；
例如，在以下Vue组件结构中：
当用户点击input字段，然后点击组件外部时，input字段会失去焦点。此时，input元素会触发一个blur事件。但由于blur事件不冒泡，div元素上监听的@blur事件永远不会被触发。因此，showOptions = false这条逻辑也就无法执行，导致下拉列表无法关闭。
为了让父元素能够感知到其内部任何子元素失去焦点的情况，我们需要一个具有冒泡特性的焦点事件。
focusout 事件：正确的解决方案
focusout事件是解决上述问题的理想选择。与blur事件不同，focusout事件会冒泡。当元素本身或其内部的任何子元素失去焦点时，focusout事件都会在元素上触发，并且会向上冒泡到其祖先元素。
这意味着，将@focusout事件监听器放置在组件的根容器上，可以有效地检测到组件整体何时失去了焦点。
示例代码：使用 focusout 修复焦点问题
要修正多选组件的焦点管理行为，只需将父元素上的@blur事件替换为@focusout：
{{ label }}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, required: true, }, }, setup(props, { emit }) { const showOptions = ref(false); const optionsMap = ref(props.options); const selectedOptions = ref([]); 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, }; },});.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};}{{ option.text }}No records found
通过将@blur=”showOptions = false”更改为@focusout=”showOptions = false”，当组件内部的input字段失去焦点，并且焦点转移到组件外部的任何元素时，div上的focusout事件就会触发，从而正确地关闭选项列表。
注意事项与最佳实践
tabindex的重要性：为了让非表单元素（如div）能够接收焦点并触发焦点事件（包括focusout），它们必须具有tabindex属性。在上述代码中，父级div已经设置了:tabindex=”tabIndex”，这是正确的做法。tabIndex的值通常为0（可聚焦但按文档顺序）或-1（可聚焦但不可通过Tab键聚焦）。mousedown与focusout的交互：在选项列表中的元素上使用@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，可以构建出更健壮、用户体验更佳的自定义组件。
以上就是Vue自定义多选组件中焦点丢失事件的正确处理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1592918.html
微信扫一扫 
支付宝扫一扫 
