《ElementPlus 与 ElementUI 差异集合》el-select 显示下拉列表在 Cesium 场景中无法监听关闭

前言

仅在 Element UI 时有此问题,Element Plus 由于内部结构差异较大,不存在此问题。详见《el-select 差异点,如:高、宽、body插入等》

问题

  • 点击空白处,下拉列表可监听并关闭;
  • 但在 Cesium 中无法监听和关闭;

解决方案

  • 代码 2 行,初始化时监听 body 单击事件;
  • 代码 7 行,获取全局下拉列表;
  • 代码 11 - 14 行,仅当列表显示时,触发 click 事件;
javascript 复制代码
// 初始化时监听 body 单击事件
document.getElementsByTagName('body')[0].onclick = () => {
    // 获取 el-select
    const els = document.querySelectorAll('.el-select');
    els.forEach(el => {
        // 获取全局下拉列表
        const dropdownEls = el.querySelectorAll('.el-select-dropdown');
        for (let i = 0; i < dropdownEls.length; i++) {
            const dEl = dropdownEls[i];
            // 仅对打开的起作用
            if (dEl.style.display !== 'none') {
                el.click();
                break;
            }
        }
    })
};
相关推荐
魔术师卡颂10 分钟前
提问量暴跌 80% ,Stack Overflow 却赚翻了?
前端·后端·ai编程
rocky19111 分钟前
什么,你还没用 claude,out 了吧!
前端·程序员
Younglina27 分钟前
想提升专注力?我做了一个web端的训练工具
前端·vue.js·游戏
NEXT0644 分钟前
CSS 选择器深度实战:从“个十百千”权重法到零 DOM 动画的降维打击
前端·css
Mapmost1 小时前
防患未“燃”:掌握森林火灾仿真分析,精准把控火势蔓延趋势
前端
半世轮回半世寻1 小时前
前端开发里最常用的5种本地存储
前端·javascript
OpenTiny社区1 小时前
TinyPro v1.4.0 正式发布:支持 Spring Boot、移动端适配、新增卡片列表和高级表单页面
java·前端·spring boot·后端·开源·opentiny
爱上妖精的尾巴1 小时前
7-9 WPS JS宏 对象使用实例6:按条件读取多表再拆成多表
前端·javascript·wps·jsa
有意义1 小时前
现代 React 路由实践指南
前端·vue.js·react.js
三木檾1 小时前
Cookie 原理详解:Domain / Path / SameSite 一步错,生产环境直接翻车
前端·浏览器