定义全局键盘监听事件,el-dialog中删除不可用

场景:全局的div增加了鼠标监听事件,而且window中添加了键盘监听事件。

window.addEventListener('keydown', this.handleKeydown)

window.addEventListener('keyup', this.handleKeyup)

事件冒泡,导致阻止无效。

1、在 el-dialog 上同时阻止默认行为和冒泡

javascript 复制代码
<el-dialog
  @keydown.stop.prevent
  // ... other props ...
>
  // ... dialog content ...
</el-dialog>

在el-dialog上添加 @keydown.stop.prevent。可能会导致全部键盘不可用。

2、在 dialog 内部的输入元素上直接处理

javascript 复制代码
<el-dialog>
  <el-input
    @keydown.stop.prevent.native
    // ... other props ...
  />
  // ... other content ...
</el-dialog>

3、在全局键盘事件处理器中添加判断,忽略来自 dialog 的事件

javascript 复制代码
// 全局键盘事件处理器
handleKeyDown(event) {
  // 检查事件源是否在 dialog 内
  const isInDialog = event.target.closest('.el-dialog');
  if (isInDialog) {
    return; // 如果在 dialog 内,直接返回不处理
  }
  
  // 原有的键盘事件处理逻辑
  // ... existing code ...
}

亲测有效!!!

4、使用 v-if 条件来控制全局键盘事件的监听

javascript 复制代码
// 在组件中添加一个控制变量
data() {
  return {
    isDialogVisible: false,
    // ... other data
  }
}

// 在模板中
<div 
  @keydown="isDialogVisible ? null : handleKeyDown"
  // ... other attributes
>
  <el-dialog
    v-model="isDialogVisible"
    // ... other props
  >
    // ... dialog content ...
  </el-dialog>
</div>
相关推荐
讨厌吃蛋黄酥10 分钟前
🔥 揭秘React魔法:从JSX到表单组件的性能与交互之争!
前端·javascript·react.js
南方kenny13 分钟前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
海上生明月丿21 分钟前
Vue 工程化
前端·javascript·vue.js
香蕉可乐荷包蛋2 小时前
排序算法 (Sorting Algorithms)-JS示例
javascript·算法·排序算法
格调UI成品2 小时前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
gnip2 小时前
微前端框架选型
前端·javascript
一只小风华~3 小时前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰3 小时前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
程序媛李李李李李蕾3 小时前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端
整点可乐3 小时前
cesium实现鹰眼图
javascript·cesium