关于javascript：Blur事件未在IE中触发-Angular 2+


Blur event is not triggering in IE - Angular 2+

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// HTML


  <span (click)="selectClicked()" class="placeholder">
    Select Item
  </span>
 
   
<ul>

       <li *ngFor="let item of data">
       <span>{{item}}</span>
</li>

   
</ul>
1
2
3
4
5
6
7
8
9
//TS

 selectClicked() {
   this.dropdownOpen = true;
 }

 closeDropDown() {
   this.dropdownOpen = false;
 }

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

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

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

相关讨论

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

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

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

1
2
3
4
5
6
7
8
// html


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

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

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