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

Question

以下问题与线程有关。

我有一个自定义的共享组件 select，我正在尝试添加一个模糊事件以在该组件未处于焦点时关闭。

// 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）中没有触发。

我尝试使用 focusout 而不是 blur，但是 selected 值没有附加到自定义 select 并且需要许多 selections 才能 select选项。

为什么不在 div 上触发模糊，有没有我可以在块级元素上使用的替代方法？

Answer 1

我能够通过将 focusout 和 tabindex=-1 添加到 div 元素来解决问题。但是通过这样做，这个值没有被设置到我的自定义下拉列表中。

原因是当我使用 focusout 时，事件冒泡回父级并且在选择后需要更多时间来设置下拉值。

所以我错过了停止冒泡事件，修复是停止传播。

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

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

当元素即将失去焦点时，将触发 focusout 事件。此事件与 blur 的主要区别在于 focusout 会出现气泡，而 blur 不会。

在 blur vs focusout -- any real differences? and https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event

上找到更多相关信息

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

Blur event is not triggering in IE - Angular 2+

javascript

internet-explorer

blur

typescript

angular