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


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

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

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

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

      • if="visible" ref="contextmenu" tabindex="-1" @blur="closeMenu">
    1. <li>...li>
  • <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>
  • 相关阅读:
    PoC免写攻略
    竞赛 深度学习 opencv python 实现中国交通标志识别
    【数据结构】栈的实现
    RHCE习题整理
    开学要考IB经济怎么办?
    蚂蚁金服Java研发岗二面:说说HashMap 中的容量与扩容实现
    使用snmp协议获取和管理摄像头设备信息
    linux查看系统/内核版本号、CPU核数/线程/型号、内存大小等
    jmeter-事务控制器与并发控制器与if控制器项目实践
    ES 集群统计 API返回结果解析说明
  • 原文地址:https://blog.csdn.net/weixin_38728902/article/details/134532062