Javascript 角度：focusout事件不使用div标记

我有一个div标签，它是一个具有多选功能的选择框

<div class="multiselect" id="multiFocus" *ngIf="editMode" (focusout)="disableSelect($event)">
    <div class="selectBox">
        <div class="multi-select-user">
            <div style="width:180px; display:inline-block">
                <ng-container *ngFor="let selectedBaseVal of selectedBaseLicences.icdata; let baseVal=index">
                    <div class="base-selection" (click)="canshowCheckBoxes = !canshowCheckBoxes" *ngIf="(selectedBaseVal.License !== 'Select Base License')&& selectedBaseVal.Checked">
                        <span style="padding:5px;">{{selectedBaseVal.License}}</span>
                        <span class="icon-close icon--small icn-float" (click)="selectedBaseVal.Checked = !selectedBaseVal.Checked"></span>
                    </div>
                    <div style="padding:6px;" *ngIf="selectedBaseVal.License === 'Select Base License'">
                                            Select Base License
                    </div>
                 </ng-container>
            </div>
            <div (click)="canshowCheckBoxes = !canshowCheckBoxes" class="icon-dropdown icn-float inline-display">
            </div>
        </div>
    </div>
    <div class="multi-select-list" *ngIf="canshowCheckBoxes">
        <div id="baseCheckboxes" style="display:block; width:200px; border:1px solid #dfdfdf; border-top:none">
            <ng-container *ngFor="let base of selectedBaseLicences.icdata">
                 <div>
                     <label class="checkbox">
                         <input type="checkbox" [checked]="base.Checked" name="checkbox1" (change)="base.Checked = !base.Checked">
                         <span class="checkbox__input"></span>
                         <span class="checkbox__label">{{base.License}}</span>
                     </label>
                 </div>
            </ng-container>
    </div>
</div>

{{selectedBaseVal.License}
选择基本许可证
{{base.License}

---

看起来我尝试的是，当我在div外单击时，它应该被禁用，所以我尝试使用focusout事件和disableSelect（）方法，我只是将一个值设为false。但focusout事件不起作用。div不支持focusout吗？或者是否有其他方法可以禁用？

在第一行代码中

使用
模糊
聚焦输出
。
（blur）=“禁用选择（$event）”
基本按钮从div中鼠标移出时禁用示例：


HTML:

要使用blur，您应该向div添加tabindex（例如：tabindex=“3”）属性或contentEditable，然后它将支持blur事件


使用（模糊）而不是focusout@AkhilAravind模糊是不工作的，除非你的div有一个tabindex属性，我不认为一个div可以被聚焦，因此不聚焦。您可以始终使用鼠标事件。然后尝试
（mouseleave）
<代码>（模糊）
只能用于表单元素。我忘了。
<div style="background:red"(mouseout)="focuslost()" (mouseover)="focus()"  >
    <button [disabled]="disableButton"> Out from Here</button>
Touch here to enable
</div>

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validator } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  disableButton: boolean = false;

   myForm: FormGroup;

  constructor(private fb: FormBuilder){
  }

  focuslost(event){
    console.log(event);
    this.disableButton = true;
  }

  focus(){
    this.disableButton= false;
  }
}