Vue自定义多选组件中焦点丢失事件的正确处理

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

Vue自定义多选组件中焦点丢失事件的正确处理

2025-11-07

浏览次数：次

返回列表

vue自定义多选组件中焦点丢失事件的正确处理

在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这条逻辑也就无法执行，导致下拉列表无法关闭。

为了让父元素能够感知到其内部任何子元素失去焦点的情况，我们需要一个具有冒泡特性的焦点事件。

Visla

AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。

100 查看详情 Visla

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的交互：在选项列表中的
元素上使用@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自定义多选组件中焦点丢失事件的正确处理的详细内容，更多请关注其它相关文章！

# 因其 # 贵溪企业网站推广服务 # 襄阳网站推广微昕hfqjwl下拉 # 罗山网站建设公司招聘 # seo外包收费标准 # 武汉专业seo网站制作报价 # 优化网站总结怎么写好 # seo网站效果 # 企业网站建设步骤包括 # 抖音排名前十位关键词 # 呼和浩特网站优化推广 # 如何使用 # 这意味着 # 能与 # css # 正确处理 # 输入框 # 是一个 # 会在 # 多选 # 自定义 # red # overflow # vue组件 # 事件冒泡 # v-if # app # vue