div的focus和blur事件

当一个元素失去焦点的时候 blur 事件被触发。它和 focusout (en-US) 事件的主要区别是 focusout 支持冒泡。不带tabindex属性的div不支持blur事件
tabindex 全局属性 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。 它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

• tabindex=负值 (通常是 tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航( tab键 )来访问到该元素，用 JS 做页面小组件内部键盘导航的时候非常有用。
• tabindex="0" ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的 DOM 结构来决定的。
• tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。
  注:
  1. 使用tabindex属性的时候在Chrome浏览器下表现为会有outline发光效果，IE浏览器下是虚框，因此需要使用css去取消边框
  2. Vue不会在数据更新时立马更新视图，因此需要用nextTick获取到最新的Dom元素才可以focus
  3. focus事件触发之后才能触发blur事件

<div tabindex="-1" @blur="closeMenu" @click="closeMenu">
     <slot>
     </slot>
</div>
<script setup lang='ts'>
    function openMenu() {
        showMenu.value = true
        // 必须获得最新的dom元素之后才可以focus
        nextTick(() => {
            menuDom.value?.focus()
        })
    }
    function closeMenu() {
        showMenu.value = false
    }
</script>
<style scoped lang="scss">
    div:focus{
      outline: 0;
    }
</style>

没有使用css取消边框的时候

:focus outline设置为none之后