若未提交更改后的值，则阻止用户单击页面上的任何位置

Question

在我的应用程序中，用户有多个输入，我使用@hostListener在外部点击，因为我有一些复杂的输入(多个复选框，我首先需要检查所有内容，然后在外部点击提交呼叫，IMG-MAP等…(。

--- TEXT INPUT ---
*add some value...*
-> click outside -> Submit

--- RADIO BUTTON ---
*change option...*
-> click outside -> Submit
...etc

如何在angular 9+中防止用户点击任何位置(菜单、其他输入…(？如果用户更改值并单击应用程序的任何位置或任何其他部分(任何按钮、菜单项、其他输入(，则需要执行更改输入的submit方法，而不是他单击的方法。

我试图添加event.PreventDefault()，但如果我们点击菜单或另一个按钮，它不会被触发submit for changed value，它是被点击项目(菜单项…(的触发方法。

@HostListener('document:click', ['$event'])
clickOut(event) {
event.preventDefault();   // if change val in text input and click directlly on radio button option, radio button option i changed and trigered submit for text input, and that is not ok, option in radio butoon can't be changed
this.submit() 
}

Answer 1

为什么不使用(blur)？

另一个想法是获取event.target as HTMLElement;，并检查表单内部是否不执行事件。PreventDefault((

@ViewChild('myForm',{read:ElementRef}) formElement:ElementRef
@HostListener('document:click', ['$event'])
clickOut(event) {
const clickTarget = event.target as HTMLElement;
if (this.formElement.nativeElement.contains(clickTarget))
{
console("inside myForm")
}
else
{
console("outside myForm")
}
}

注意：我不检查代码(我很忙(，但我想工作