IE中不会触发模糊事件-Angular 2+

Question

以下问题与模糊不起作用-Angular 2线程有关。

我有一个自定义选择的共享组件，并且我试图添加一个模糊事件以在该组件不清晰时关闭。

// HTML

<div (blur)="closeDropDown()" tabindex="0">
  <span (click)="selectClicked()" class="placeholder">
    Select Item 
  </span>
  <div class="options">
    <ul>
       <li *ngFor="let item of data"> 
       <span>{{item}}</span></li>
    </ul>
  </div>

//TS

 selectClicked() {
   this.dropdownOpen = true;
 }

 closeDropDown() {
   this.dropdownOpen = false;
 }

我能够通过添加线程中提到的tabindex来实现模糊事件（在除IE之外的所有浏览器中均可）。 但是模糊事件在IE（版本> 10）中不会触发。

我尝试使用聚焦而不是模糊，但是所选值未附加到自定义选择中，并且需要很多选择才能选择选项。

为什么模糊不会在div上触发，并且我可以在块级元素上使用其他替代方法吗？

Answer 1

我可以通过将focusout和tabindex = -1添加到div元素来解决此问题。 但是通过执行此值并没有将其设置为我的自定义下拉菜单。

这样做的原因是当我使用焦点输出时，该事件冒泡回到了父级，并且在选择之后花费了更多时间来设置下拉值。

所以我错过了停止冒泡事件的机会，解决方法是停止传播。

// html
<div (focusout)="closeDropDown($event)" tabindex="-1"></div>

// ts
closeDropDown(event) {
  event.stopPropogation();
  this.dropdownOpen = false;
}

当元素即将失去焦点时，触发聚焦事件。 此事件和模糊之间的主要区别在于，焦点模糊会冒泡，而模糊不会。

在模糊vs聚焦上找到更多有关此的信息-真正的区别是什么？ 和https://developer.mozilla.org/zh-CN/docs/Web/API/Element/focusout_event