javascript - Angular: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>
看起来像这样我正在尝试的是,当我在 div 外部单击时,它应该被禁用,所以我正在尝试使用 focusout 事件,并且在 disableSelect() 方法中我只是将值设为 false。但是focusout事件不起作用。div 不支持焦点输出吗?或者有没有其他方法可以禁用?
解决方案
对于使用模糊,您应该将tabindex (ex: 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>
对于角度:
<div tabindex="1" (blur)="alert('blur!')" style="border:1px solid #ccc; background-color: red; color: white;">
上面的示例将以角度工作。
推荐阅读
- pivot - 数据透视查询雪花中的标识符无效
- python - 如何将字符串格式的 JSON 放入表中
- c - 弄清楚这个按位 AND 和 LSL 在 C 中的作用
- python-3.x - 我怎样才能保持部分代码一直在运行?
- c# - 如何使用 xunit.net 忽略整个 dll 或命名空间?
- python - 在 R 包中包含 Python 函数,而无需在每次使用该函数时都导入整个包
- r - 如何从R中的向量中减去元素?
- neo4j - 有没有办法在 Cypher 中设置参数?
- reactjs - React.useState 正在改变 initialValues 常量
- sql-server - 如何在 SQL Server 中显示字符的输出?