Javascript 如何在Angular4中检测父div而不是子div上的focusout

我有一个自定义的自动完成元素。它由一个输入字段、一个按钮和一个包含自动完成的div组成。我想要的行为是，当我在inputbox或下拉框外单击时，它调用一个回调，保存输入字段中的任何内容，如果我单击下拉选择，我希望它调用选择我单击的内容并保存该内容的事件

但目前，我没有像exptected那样工作，当我单击下拉菜单时，会调用focusout，下拉菜单不会关闭，第二次单击时，它实际上会选择下拉菜单值

这是一个组件：

    <div class="input-group input-group-sm " (focusout)="blur($event)">
  <input type="text" class="form-control" [ngModel]="userInput" title="{{userInput}}" (ngModelChange)="onValueChanged($event)"
    (focus)="$event.target.select()">
  <div>
    <button type="button" class="btn btn-secondary dropdown-toggle" (click)="showPredefinedOptions()">
    </button>
    <div *ngIf="showDropdown" [ngClass]="{'dropdown-menu dropdown-menu-right':true, 'show-address-autocomplete':showDropdown}">
      <div *ngIf="currentUserAddresses">
        <a *ngFor="let item of currentUserAddresses" class="dropdown-item ekat-dropdown-item" (click)="chooseAddress(item)">{{item}}</a>
        <div class="divider dropdown-divider"></div>
      </div>
      <a *ngFor="let item of currentResult" class="dropdown-item ekat-dropdown-item" (click)="chooseAddress(item)">{{item}}</a>
    </div>
  </div>
</div>

{{item}}
{{item}}

在ts文件中，我有一行@Output（）focusOut:EventEmitter=neweventemitter（）；它定义了我订阅的focusoutevent

这就是我使用它的方式：

<td> <address-autocomplete [value]="product.defaultDeliveryAddress ? defaultAddress : product.deliveryAddress"  (onSelect)="onAddressChanged($event, product)"
                                 [userAddresses]="userAddressed" (onWritten)="onAddressWritten($event, product)" (focusOut)="focusOut(product)">></address-autocomplete></td>

>

为什么单击下拉元素时会调用focusout？

这更容易使用：

从'@angular/forms'导入{FormControl}；
导出类MyComponent{
inputControl=newFormControl（null，{updateOn:'blur'}）；
selectControl=newformcontrol（null，{updateOn:'change'}）；
恩戈尼尼特（）{
inputControl.valueChanges.subscribe（值=>{
// ...
});
选择Control.valueChanges.subscribe（值=>{
// ...
});
}
}

这更容易使用：

从'@angular/forms'导入{FormControl}；
导出类MyComponent{
inputControl=newFormControl（null，{updateOn:'blur'}）；
selectControl=newformcontrol（null，{updateOn:'change'}）；
恩戈尼尼特（）{
inputControl.valueChanges.subscribe（值=>{
// ...
});
选择Control.valueChanges.subscribe（值=>{
// ...
});
}
}

Focus基本上作用于输入字段，因此一旦单击外部输入字段，它将触发对父div的focusout，无论您在该父div内部还是外部单击。Focus基本上作用于输入字段，因此一旦单击外部输入字段，它将触发对父div的focusout，无论您在该父div内部单击div或其外部。此外，如果触发select上的更改事件，则不得触发onblur事件。此外，如果触发select上的更改事件，则不得触发onblur事件。