Javascript 当输入模糊时隐藏弹出窗口，单击弹出窗口时除外

我有以下用例：

有一个

输入

，只要有焦点，输入旁边就会显示一个弹出窗口。因此，当

输入

具有焦点时，用户可以在

输入

中键入内容，或者使用弹出窗口选择内容

当用户完成后，他可以通过单击 在其他地方或按tab键并聚焦下一个元素。 但是，如果他单击弹出窗口内的按钮，弹出窗口应保持不变 打开，输入应保持集中，以便用户可以继续 打字

我遇到的问题是，在输入处理弹出窗口中的

（单击）

之前，会对输入进行角度处理（模糊）。这意味着当用户 点击弹出窗口，输入失去焦点，隐藏，然后 将不再处理用户的单击

我对这个问题作了如下解释：

这是源代码：

app.component.html

你好 键入“一”、“二”或“三”更改号码或选择一个号码 从弹出窗口。
隐藏 模糊上的帮助器（如果设置了此选项，则弹出窗口中的按钮不起作用 但是如果没有设置，如果输入松动，弹出窗口不会关闭 焦点->我如何才能同时使用这两个按钮？按钮可以工作，但弹出窗口仍然可用 接近模糊？）

您的号码：{{selectedNumber} 更改号码： {{number.formatted}} 应用程序组件.ts

从'@angular/core'导入{Component，ViewChild，ElementRef}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
formattedNumber:string='three'；
所选编号：编号=3；
helpervible:boolean=false；
编号：任意[]=[
{raw:1，格式为：'one'}，
{raw:2，格式为：'two'}，
{raw:3，格式为：'three'}
];
@ViewChild（'mainInput'，{static:false}）
主输入：ElementRef；
hideHelperOnBlur：布尔型；
newNumberTyped（newFormattedNumber:string）{
this.numbers.forEach（（number）=>{
if（newFormattedNumber==number.formatted）{
this.formattedNumber=newFormattedNumber；
this.selectedNumber=number.raw；
}
});
}
选择数字（新建数字：数字）{
this.numbers.forEach（（number）=>{
if（newRawNumber==number.raw）{
this.formattedNumber=number.formatted；
this.selectedNumber=newRawNumber；
}
});
this.mainInput.nativeElement.focus（）；
}
processBlur（）{
如果（这个隐藏的peronblur）{
this.helpervible=false；
}
}
}

我期望以下行为：

• 当输入获得焦点时，弹出窗口可见
• 当用户单击页面上非当前位置的任何位置时 弹出或输入时，弹出关闭
• 当用户在聚焦输入的同时按下选项卡时，输入 失去焦点，弹出窗口关闭
• 当用户单击弹出窗口中的按钮时，该数字被选中

我似乎只能得到第二个和第三个或第四个 工作条件（请参见演示中的复选框）

我已经尝试过的：

• 将@HostListener与focusin、focusout或focus或 （模糊）=“someFunction（event）查找哪个元素具有新焦点 要检查该元素是否在弹出窗口或输入中->此 似乎不起作用，因为在focusout事件发生时，它还不起作用 明确谁获得了新的关注点
• 使用超时，以便angular已完成对 超时结束后单击事件->这似乎可以工作，但可以工作 超时是一个非常笨拙的解决方案，可能很容易崩溃

---

有人有解决方案吗？

这更像是一个Javascript事件。

模糊

事件发生在

单击

事件之前。

单击

事件仅在松开鼠标按钮后发生

您可以在此处使用

mousedown

事件来发挥您的优势。

mousedown

事件发生在

blur

事件之前。只需在弹出按钮中调用

mousedown

上的

preventDefault

即可防止

输入失去焦点。这也可以解决
输入的问题
单击弹出窗口中的按钮时闪烁，以便在
selectNumber
函数中删除
此.main input.nativeElement.focus（）；

{{number.formatted}

这是一个关于的工作示例。
@nash11感谢您的编辑，我在手机上，所以无法正确格式化，很高兴您修复了它：）非常感谢！这解决了我的问题：D我非常喜欢这个解决方案，它非常容易不用。focus（）每次单击某个内容时。很抱歉响应太晚，我的登录昨天停止工作，现在我可以随时返回我的帐户。^^^^。很高兴我能帮助解决这个问题！谢谢@nash11我想找到这个答案的最大困难是弄清楚如何使用查询短语来找到问题。。。