本文深入探讨了在vue自定义多选组件中处理焦点事件的常见问题。当组件内部输入框失去焦点时，外部容器的blur事件可能无法按预期触发，导致下拉列表无法关闭。核心问题在于blur事件不冒泡，而focusout事件则会冒泡。通过将blur替换为focusout，并确保容器可聚焦，可以有效解决此问题，实现组件外部点击时正确关闭选项列表的功能。
Vue自定义组件中焦点事件的挑战
在开发Vue自定义组件，特别是像多选下拉列表这类需要根据焦点状态控制UI元素（如选项列表）显示与隐藏的组件时，正确处理焦点事件至关重要。一个常见的需求是，当用户点击组件外部时，组件的选项列表应该自动关闭。开发者通常会尝试在组件的根元素上监听blur事件来实现这一逻辑。然而，在某些情况下，尤其当组件内部包含可聚焦的元素（如input字段）时，blur事件的行为可能不尽如人意。
具体来说，如果用户点击组件内部的input字段，然后点击组件外部的任何地方，组件根元素上的blur事件可能不会触发，导致选项列表仍然保持打开状态。这通常是由于对浏览器事件机制的误解造成的。
Blur与Focusout事件的根本区别
要理解上述问题并找到解决方案，我们需要深入理解blur和focusout这两个焦点相关事件的本质区别：
blur事件：
立即学习“前端免费学习笔记（深入）”；
blur事件在元素失去焦点时触发。关键特性：不冒泡。 这意味着当一个子元素失去焦点时，它的blur事件不会传播到父元素。父元素只有在它自身直接失去焦点时才会触发blur事件。在我们的多选组件场景中，当input字段失去焦点时，它会触发自己的blur事件，但这个事件不会向上冒泡到包含input字段的外部div。因此，外部div上的@blur=”showOptions = false”不会被触发。
focusout事件：
focusout事件也在元素失去焦点时触发。关键特性：冒泡。 这意味着当一个子元素失去焦点时，它的focusout事件会向上冒泡到父元素，直到文档根部。因此，当input字段失去焦点时，它会触发focusout事件，并且这个事件会冒泡到外部div，从而触发外部div上监听的focusout处理函数。
解决方案：使用focusout事件
鉴于blur事件不冒泡的特性，为了在父元素上捕获其子元素失去焦点的事件，我们应该使用focusout事件。
原始代码中的问题示例：
在这个例子中，@blur=”showOptions = false”绑定在外部div上。当用户在input字段中输入后，点击组件外部，input字段会失去焦点。但由于blur事件不冒泡，外部div不会收到这个失去焦点的通知，showOptions也就不会被设置为false。
修正后的代码示例：
将外部div上的@blur事件替换为@focusout。
{{ label }}import { defineComponent, PropType, ref, watch } from "vue";import { MagnifyingGlassIcon } from "@heroicons/vue/24/outline";export default defineComponent({ name: "AppAutocomplete", components: { MagnifyingGlassIcon, }, props: { modelValue: { type: String, }, label: { type: String, default: "", }, tabIndex: { type: Number, default: 0, // 确保父div可聚焦 }, 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(); return { showOptions, optionsMap, searchInput, selectedOptions, 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
注意事项与最佳实践
tabindex属性： 确保你的父容器（即监听focusout事件的div）具有tabindex属性（例如tabindex=”0″或tabindex=”-1″）。这使得该div元素能够接收焦点，从而在焦点离开它或其子元素时正确触发focusout事件。在提供的代码中，tabIndex prop已经确保了这一点。事件冒泡的理解： 深入理解DOM事件的捕获和冒泡阶段对于开发交互式组件至关重要。blur和focus事件不冒泡，而focusin和focusout事件则会冒泡。用户体验： 使用focusout可以提供更流畅的用户体验，因为无论用户是点击组件内部的可聚焦元素后离开，还是直接点击组件外部，选项列表都能一致地关闭。可访问性： 正确处理焦点事件对于键盘导航和整体可访问性至关重要。确保组件在没有鼠标的情况下也能完全操作。@mousedown与@click： 在处理选项点击时，如果希望在focusout事件处理函数关闭选项列表之前捕获到点击事件，可以考虑使用@mousedown而不是@click。因为mousedown事件在blur/focusout之前触发，可以避免在点击选项时列表被过早关闭。在示例代码中，选项列表的li元素已经使用了@mousedown，这是一个很好的实践。
总结
在Vue自定义组件中，当需要父元素监听其内部子元素失去焦点的事件时，应优先使用focusout事件而非blur事件。focusout事件的冒泡特性使其能够捕获到子元素失去焦点的通知，从而实现更灵活和可靠的UI交互逻辑。同时，确保父容器具有tabindex属性是实现这一机制的必要条件。通过这些调整，可以显著提升自定义多选组件的用户体验和功能完整性。
以上就是Vue自定义多选组件中焦点事件处理：Blur与Focusout的深度解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591421.html
微信扫一扫 
支付宝扫一扫 
