javascript - Angular:focusout 事件不适用于 div 标签

Question

我有一个 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>

看起来像这样我正在尝试的是，当我在 div 外部单击时，它应该被禁用，所以我尝试使用 focusout 事件，在 disableSelect() 方法中我只是将值设置为 false。但是 focusout 事件不起作用。 div不支持focusout吗？还是有其他方法可以关闭？

Answer 1

要使用blur，您应该将tabindex(例如:tabindex="3")属性或contentEditable添加到div，然后它将支持模糊事件。

<<h1>Click in divs and outside of them</h1>

<div onblur="alert('blur!')" style="border:1px solid #ccc;     background-color: blue; color: white;">
  This div could not support blur!
</div>
<br/>
<br/>
<div tabindex="1" onblur="alert('blur!')" style="border:1px solid #ccc; background-color: red; color: white;">
  This div support blur!
</div>

对于 Angular :

<div tabindex="1" (blur)="alert('blur!')" style="border:1px solid #ccc; background-color: red; color: white;">

上面的例子将在 Angular 上工作。