Javascript 如何在没有计时器的情况下关闭模糊弹出窗口,并允许在弹出窗口中单击选项

Javascript 如何在没有计时器的情况下关闭模糊弹出窗口,并允许在弹出窗口中单击选项,javascript,Javascript,我正在尝试用javascript创建一个自定义选择小部件。大家都知道该功能,开始键入以筛选列表选项,单击一个项目以选中它,然后单击框外,下拉列表将消失 问题是,javascripts模糊或focusout事件在我尝试选择的项目的单击事件之前触发。我能想到的唯一解决方案是在模糊功能上设置一个计时器,使弹出窗口在200毫秒后变小,以便在弹出窗口中捕获单击事件。这种方法真的很恶心,而且毫无优雅可言。有人知道本机框架是如何处理这个问题的吗?是否针对在小部件外部单击时关闭的任何弹出窗口?最简单的解决方案是

我正在尝试用javascript创建一个自定义选择小部件。大家都知道该功能,开始键入以筛选列表选项,单击一个项目以选中它,然后单击框外,下拉列表将消失


问题是,javascripts模糊或focusout事件在我尝试选择的项目的单击事件之前触发。我能想到的唯一解决方案是在模糊功能上设置一个计时器,使弹出窗口在200毫秒后变小,以便在弹出窗口中捕获单击事件。这种方法真的很恶心,而且毫无优雅可言。有人知道本机框架是如何处理这个问题的吗?是否针对在小部件外部单击时关闭的任何弹出窗口?

最简单的解决方案是使您的模式不是覆盖的子对象,而是覆盖的兄弟对象。然后,模式对话框中的单击将不会冒泡到覆盖的单击事件处理程序

var trigger=document.getElementById'open_modal'; var overlay=document.getElementById'overlay'; var modal=document.getElementById'modal'; 触发器.addEventListener'click',OpenModel; overlay.addEventListener'click',closeModal; 函数开模{ overlay.style.display='block'; modal.style.display='block'; } 函数closeModale{ overlay.style.display='none'; modal.style.display='none'; } p{ 利润率:10px; 字体大小:14px; 字体大小:粗体; } 覆盖层{ 显示:无; 背景色:rgba0,0,0,8; 位置:固定; 排名:0; 左:0; 宽度:100%; 身高:100%; } 模态{ 显示:无; 位置:绝对位置; 背景色:fafa; 边界半径:4px; 宽度:200px; 高度:150像素; 最高:50%; 左:50%; 转化:translateY-50%translateX-50%; } 我的同僚们都是精英。解决方案的必要性,即使是自然条件,也要考虑到分子减去铜酸盐驱避剂的劳动


将事件侦听器添加到整个正文中。查找事件目标,如果它可能是一个div,则处理它,如果不是,则删除处理程序并关闭它。很多示例很容易在谷歌上搜索,比如你使用的代码是什么?这将有助于你得到答案。这确实是一个普遍存在的问题,可以应用于任何地方。不需要代码。这就像弹出窗口链接中的点击事件之前触发模糊事件一样简单,因此在模糊时让弹出窗口关闭是很棘手的,但仍然允许弹出窗口上的点击像选择项目时一样触发问题并不完全清楚。但是,有必要指出的是,通过防止模式上的单击事件在DOM中冒泡,可以依靠父容器的单击事件而不是焦点事件来解除模式。啊,是的,谢谢dlatikay我以前确实见过这种方法。我仍然希望有一个更优雅的方法,但我有一种感觉,这就是它实现的方式。啊,伙计,这个解决方案真的很漂亮,但我没有覆盖。我希望我做了。覆盖的东西是它允许您通过点击触发弹出关闭。我的问题是我试图通过模糊或聚焦触发菜单关闭,但这总是在模式中单击之前触发,所以到目前为止它是无用的。看来我在这里采取的任何一种解决方案都会让人觉得不舒服。真可惜。这是一个非常普遍的特征needed@Gravychain不幸的是,我对您环境的细节了解不够,无法提供有用的解决方案。我建议您研究的一件事是使用事件的捕获阶段。它是事件方案中使用较少的一部分,但它允许您在DOM树中侦听事件,并且它位于标准冒泡阶段之前。这里有一些信息。希望你能找到你想要的。