场景如下:用 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>