Javascript IE-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>

我可以通过添加线程中提到的tabindex来实现blur事件（适用于除IE之外的所有浏览器）。但模糊事件并没有在IE中触发（版本>10）

我尝试使用focusout而不是blur，但所选值没有附加到自定义选择，需要进行多次选择才能选择选项

---

为什么div上没有触发blur？我可以在块级元素上使用其他选项吗？

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

原因是当我使用focusout时，事件会冒泡返回到父级，并在选择后花费更多时间设置下拉值

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

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

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

//html
//ts
关闭下拉列表（事件）{
event.stopPropogation（）；
this.dropdownOpen=false；
}

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

---

有关此问题的更多信息，我建议您尝试对任何其他事件进行测试，以检查该问题是否可以在任何事件中产生，或者该问题是否专门与此事件有关。可能任何事件都没有在IE中调用。出于测试目的，请尝试删除tabindex=“0”，并尝试检查事件是否在IE中工作。很抱歉，当我看到有人试图重写现有HTML元素时，我有点畏缩。在本例中，看起来您正在尝试重写select。例如，在处理select时，您是否考虑过可访问性？使用屏幕阅读器的用户是否能够听到他们当前选择的选项？当他们按tab键时会发生什么？轮班表？侧箭？esc？支持RTL吗？浏览器开发人员有一个完整的团队，他们进行了广泛的研究，达到了已知的标准，并考虑了边缘案例。你真的认为你自己能做得更好吗？你真的想吗？

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

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