javascript - 模糊事件未在 IE 中触发 - Angular 2+

Question

以下问题与 Blur not working - 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)中不触发模糊事件。

我尝试使用 focusout 而不是 blur，但所选值未附加到自定义选择，需要多次选择才能选择一个选项。

为什么 blur 没有在 div 上触发，我可以在 block 级元素上使用任何替代方法吗？

Answer 1

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

原因是当我使用 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? 上找到更多相关信息和 https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event