JS实现的对话框已打开时，如何阻止按fn键重复触发弹出？

核心实现思路是添加对话框实例状态校验，在触发弹出逻辑前先判断当前同类对话框是否处于打开状态，终止重复初始化流程即可解决问题，以下是不同场景下的可落地实现方案：

实现方案 #

方案1：全局状态变量标记（适合小型原生JS项目） #

• 定义全局变量存储当前对话框的打开状态，初始值为false
• 触发fn键弹出逻辑时，先判断状态变量是否为true，如果是直接终止逻辑
• 对话框关闭（点击确认/取消/蒙层/ESC键）时，将状态变量重置为false

// 全局状态标记
let isSameDialogOpen = false;

// fn键监听事件
document.addEventListener('keydown', (e) => {
  // 仅当fn键按下且对话框未打开时才执行弹出逻辑
  if (e.key === 'fn' && !isSameDialogOpen) {
    isSameDialogOpen = true;
    const targetDialog = document.querySelector('#target-dialog-id');
    targetDialog.showModal();
    
    // 监听对话框关闭事件，重置状态
    targetDialog.addEventListener('close', () => {
      isSameDialogOpen = false;
    }, { once: true }); // once参数避免重复绑定监听造成内存泄漏
  }
})

方案2：DOM属性校验（无需额外维护变量，适合多对话框场景） #

原生<dialog>元素自带open属性可直接判断打开状态，无需额外定义全局变量：

document.addEventListener('keydown', (e) => {
  if (e.key === 'fn') {
    const targetDialog = document.querySelector('#target-dialog-id');
    // 已打开时直接终止逻辑
    if (targetDialog.open) return;
    targetDialog.showModal();
  }
})

如果使用第三方UI框架（Element UI、Ant Design等），直接校验对话框绑定的可见性状态变量即可，以Vue3+Element Plus为例：

const dialogVisible = ref(false);
const handleFnPress = () => {
  // 可见性为true时直接返回
  if (dialogVisible.value) return;
  dialogVisible.value = true;
}

方案3：防抖辅助（适合高频误触场景） #

如果存在短时间内多次按fn键的误触场景，可以给触发逻辑添加300ms防抖，配合状态校验使用效果更好：

// 防抖工具函数
const debounce = (func, delay = 300) => {
  let timer = null;
  return (...args) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

// 绑定防抖后的弹出逻辑
const openDialog = debounce(() => {
  const targetDialog = document.querySelector('#target-dialog-id');
  if (targetDialog.open) return;
  targetDialog.showModal();
})

document.addEventListener('keydown', e => e.key === 'fn' && openDialog());

注意事项 #

• 状态重置逻辑要覆盖所有对话框关闭路径：确认按钮、取消按钮、蒙层点击、ESC快捷键关闭等，避免状态锁死导致无法正常打开对话框
• 多类型对话框场景可以用对象存储状态，以对话框ID为key分别标记不同类型对话框的打开状态

内容的提问来源于stack exchange，提问作者mm28i