Esc键取消功能在弹窗关闭时失效怎么办？

夏侯世玉提问于 2026-02-04 13:18:44 阅读 33

交互

我在做一个带弹窗的组件，点击按钮弹出后按Esc应该关闭，但实际测试时有时候能触发有时候不行。代码是这样写的：document.addEventListener('keydown', handleKey)，在mounted里绑定了，destroyed里解绑了。

尝试过把事件监听改成@keydown.esc指令直接挂载到弹窗元素，结果完全没反应。控制台也没报错，但就是偶尔失效，尤其是在快速连续开关弹窗时。

这是相关代码块：


handleKey(e) {
  if (e.key === 'Escape' && this.showModal) {
    this.closeModal()
  }
}

明明this.showModal是实时的，为什么Esc事件会突然失效呢？

Esc取消

我来解答赞 4 收藏

反馈

2 条解答

司马士俊 Lv1

你这个问题其实是事件监听器重复绑定导致的。虽然你在 destroyed 里解绑了，但如果组件被频繁创建销毁，比如快速开关弹窗，很容易出现多个 keydown 监听同时存在的情况。这时候可能某些监听器已经丢失引用，无法正确移除，官方文档里说这类全局事件必须确保 on 和 off 的调用次数匹配。

更稳妥的做法是改用一次性绑定到 document，并且只在弹窗真正显示时才挂载监听。你可以把事件绑定逻辑挪到 showModal 变为 true 的时候：

watch: {

  showModal(newVal) {

    if (newVal) {

      // 弹窗打开时绑定

      document.addEventListener('keydown', this.handleKey)

    } else {

      // 关闭时立即解绑

      document.removeEventListener('keydown', this.handleKey)

    }

  }

}

另外你说 @keydown.esc 没反应，那是因为这个修饰符默认只作用于当前元素是否聚焦，而弹窗可能是 display 切换但没获取焦点。你需要给弹窗最外层元素主动 focus 才行，或者直接用 native 事件。

还有一个建议：Escape 事件最好加上判断 e.target 是否在可交互元素内，避免输入框里按 Esc 也被拦截。可以这样增强一下：

if (e.key === 'Escape' && this.showModal && document.activeElement !== this.$refs.inputField)

总之核心问题是监听器生命周期没管理好，不是 Esc 本身失效。

2026-02-10 19:11

UP主～嘉蕊 Lv1

这个问题我之前也踩过。你监听的是全局 keydown，但 Vue 的 @keydown.esc 本质上只会在当前组件的根元素触发时生效，所以挂到弹窗元素上是没用的——因为弹窗内容可能不是当前焦点目标。

但你目前的写法问题更大，handleKey 中的 this.showModal 虽然是响应式的，但在事件回调中不会自动追踪更新。尤其是在组件销毁重建时，闭包里的 this 可能指向旧的实例。

你可以这样改：

mounted() {

  this.handleKey = (e) => {

    if (e.key === 'Escape' && this.showModal) {

      this.closeModal()

    }

  }

  document.addEventListener('keydown', this.handleKey)

},

destroyed() {

  document.removeEventListener('keydown', this.handleKey)

}

或者更保险一点，用一个标志位：

data() {

  return {

    isModalActive: false

  }

},

mounted() {

  this.handleKey = (e) => {

    if (e.key === 'Escape' && this.isModalActive) {

      this.closeModal()

    }

  }

  document.addEventListener('keydown', this.handleKey)

},

methods: {

  openModal() {

    this.isModalActive = true

  },

  closeModal() {

    this.isModalActive = false

  }

},

destroyed() {

  document.removeEventListener('keydown', this.handleKey)

}

关键是把事件处理函数绑定为组件实例上的属性，这样 Vue 的响应式系统才不会漏掉依赖。同时组件销毁时确保移除监听器，避免内存泄漏。

如果你希望更简洁地控制 Esc 行为，可以用 Vue.directive 自定义指令统一管理，避免手动绑定解绑事件。不过你现在这种写法加上面的改动，应该就能解决你的问题。复制过去试试。

2026-02-04 14:04