当前位置: 首页 > backend >正文

el-dialog 打开dialog弹框,鼠标点击事件无法执行

背景:

因为业主要求,他们使用奇安信可信浏览器,这个浏览器是谷歌浏览器引擎套了一层盒子

问题描述:

在谷歌、Edge浏览器正常执行,在奇安信可信浏览器就出现了问题。

问题解决思路:

1.浏览器特性,奇安信可信浏览器不支持,考虑是不是浏览器的问题

2.在奇安信可信浏览器调试问题,寻找解决思路。

效果展示:

解决问题之前:

没有打开弹框就是正常的,如下图:

解决问题之后:

打开dialog弹框之后,鼠标对于地图的操作可以执行

解决思路:

dialog弹框可能出现了问题,点击弹框后,弹框下面的所有东西都没法点击操作。可能是弹框遮罩层,弹框的遮罩层的层级太高了哦,盖住下面的了,然后都点不了

核心代码:

<style lang="scss">

//弹框可点击底层页面

.c-dialog {

    .el-dialog__header,

    .el-dialog__body,

    .el-dialog__footer {

        pointer-events: auto !important;

    }

}

.dialog-modal {

    pointer-events: none !important;

}

:has(> .el-overlay-dialog .c-dialog) {

    pointer-events: none !important;

}

</style>

pointer-events

属性值和用法

pointer-events属性可以取多种值,但最常用的是autonone

  • auto:元素会正常响应指针事件,这是默认值。

  • none:元素不会成为指针事件的目标,事件会“穿透”该元素并作用于其下的元素。

在SVG中,pointer-events还可以取其他值,如visiblePaintedvisibleFillvisibleStroke等,这些值允许更细粒度的控制,例如只有当鼠标指针位于元素的填充区域或描边区域时,元素才会响应指针事件。

.el-dialog__header,

.el-dialog__body,

.el-dialog__footer {

    pointer-events: auto !important;

}

备注:弹框本身是可拖拽的,所以:pointer-events: auto

其它部分,pointer-events: none

http://www.xdnf.cn/news/19856.html

相关文章:

  • [TryHackMe]Oh My WebServer(nday漏洞+容器逃逸)
  • Teacher Forcing技术解析
  • 解构复杂财务逆向业务:如何优雅地生成与管理负数单?
  • c++ zint二维码、条形码开发库
  • k8s初始化常见问题
  • 笔记:深层卷积神经网络(CNN)中的有效感受野简单推导
  • 行业分享丨基于SimSolid的大型汽车连续冲压模具刚度分析
  • vue3前端开发的基础教程——快速上手
  • flutter 中间组件自适应宽度
  • 硬件:51单片机的按键、中断、定时器、PWM及蜂鸣器
  • 深入解析MongoDB内部架构设计
  • 深度学习-----简单入门卷积神经网络CNN的全流程
  • 做 DevOps 还在被动救火?这篇让你把监控玩成 “运维加速器”!
  • 【CV】OpenCV基本操作④——算术操作
  • OpenGL视图变换矩阵详解:从理论推导到实战应用
  • 《四川棒球知识百科》球速最快的运动之一·棒球1号位
  • Grok-4 :AI 基准测试霸主,速度与智能并存——但代价几何?
  • 学习 Android (十九) 学习 OpenCV (四)
  • sql项目总结
  • 无人机报警器8G信号技术解析
  • npm install 报错问题解决 npm install --ignore-scripts
  • 嵌入式学习---(单片机)
  • 【Kubernetes知识点】监控升级,备份及Kustomize管理
  • Python 基础语法与控制流程学习笔记
  • 学习笔记:MYSQL(3)(常用函数和约束)
  • 嵌入式人别再瞎折腾了!这8个开源项目,解决按键/队列/物联网所有痛点,小白也能抄作业
  • 【JVS更新日志】低代码、物联网、无忧企业计划9.3更新说明!
  • GitLab Boards 深度解析:选型、竞品、成本与资源消耗
  • 上下文记忆力媲美Genie3,且问世更早:港大和可灵提出场景一致的交互式视频世界模型!
  • MindNode AI:AI辅助思维导图工具,高效整理思路快速搭框架