场景:全局的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>