巧用 tabindex 属性解决 iframe 环境下鼠标点击元素之外的监听事件

场景如下：用 js 模拟了一个右键菜单，在鼠标点击到右键菜单之外的区域时，关闭菜单。

之前的处理方案是，打开右键菜单时在 body 上注册一个监听事件，addEventListener('click', closeMenu) 。但是这种方式在遇到 iframe 时不起作用了。

当点击到 iframe 区域时，不会触发绑定在 body 上的点击事件。

所以我们就在右键菜单视图上设置一个 tabindex 属性，在打开菜单的时候，调用元素的 focus 方法，使元素处于焦点状态，当点击其他区域的时候，会触发元素的失焦事件，此时调用关闭菜单的方法。

<ul v-if="visible" ref="contextmenu" tabindex="-1" @blur="closeMenu">
    <li>...</li>
</ul>

<script setup lang="ts">
    const contextmenu = ref(null)
    const visible = ref(false)
    
    function openMenu() {
        visible.value = true
        // ...
        nextTick(() => {
            if(contextmenu.value) {
                contextmenu.value?.focus()
            }
        })
    }

    function closeMenu() {
        visible.value = false
    }
</script>