本文探讨了在页面中存在多个下拉框组件和iframe时，由于iframe导致的下拉框无法正常关闭的问题。问题源于iframe阻止了document上的mouseup事件传播。解决方案是利用focusout事件，通过获取document.activeElement来判断是否在iframe内，从而调用下拉框的关闭方法。在实际业务中，可以通过遍历并存储所有下拉框的关闭方法，统一在事件监听中触发。
项目场景：
在同一页面中存在具有多个含有下拉弹窗的组件和iframe,当点击有下拉框组件后，再点击iframe区域，下拉框不收起，点击iframe之外区域会收起
问题案例：
案例链接
点击页面中的下拉框组件，再点击红色iframe区域，下拉框不收起，点击红色以外的区域，下拉框收起。
原因分析：
当点击iframe时document监听不到moseup事件,而element-ui是依靠监听document上的moseup去收起下拉框的。
element-ui中统一用了一个directives叫做clickoutside实现的。
解决方案：
解决方案1：
基本思路是监听 focusout事件，通过document.activeElement获取元素信息，如果是iframe的话，调用下拉框组件的handleClose方法，案例链接，可以点先点击蓝色上的select,完了点击蓝色iframe,发现下拉框收起
实际业务中，好多下拉框可能在一个组件中，可以遍历父级的children,保存handleClose方法，完了在监听事件中统一触发，案例链接 例如绿色区域
扫一扫
6615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
