在 IE11 中，单击其中一个子项时，焦点事件未在具有显示弹性的可聚焦父 HTML 元素上触发

Question

Here 已更新（更多孤立示例）IE11 中的问题。当父元素（tabindex=0，显示为flex）有子元素<div>或<span>时，在IE11中点击里面的文本不会触发focus事件。这在其他浏览器中工作正常，也适用于 IE11 和 <p> 或 <section> 的子浏览器。感谢@ConnorsFan，解决方案之一是在父项上使用 display: block 而不是 display: flex。然而，这似乎是 IE11 中的一个错误。

原版POST:

Here 是一个简单的自定义 HTML 组件，使用 Angular 创建，它有一个 HTML DIV 子组件，其中包含文本。该组件是可聚焦的（它的 tabindex=0），但是在 Internet Explorer 11 中单击文本不会触发聚焦事件。这在所有其他浏览器中都可以正常工作，这让我认为这是 IE11 中的错误。似乎在 IE11 中某些东西阻止了焦点被触发到父可聚焦元素上，同时单击不可聚焦的子元素。

替换 focus with focusin 并使用 stopPropagation() 可能是一个选项，但它也不起作用并且传播了事件（取消注释 focusin hostListener）。我需要只在自定义组件上触发焦点。

Answer 1

   import {  Component, OnInit, HostListener, HostBinding} from '@angular/core';

@Component({
  selector: 'my-div',
  template: `<div (focus)="onFocus($emit)">Click to see some magic happen :)</div>`,
  styles: [`.div-class { display: flex; border: 1px solid black; }`]
})
export class DivComponent  {
    @HostBinding('attr.tabindex')
    public tabindex = 0;

    @HostBinding('attr.class')
      get hostClass(): string {
        return 'div-class';
      }

    @HostListener('focus', ['$event'])
    //@HostListener('focusin', ['$event'])
    public onFocus(event) {
      console.log("focus my-div", document.activeElement);
      // event.stopPropagation();
    }

    @HostListener('click', ['$event'])
    public onClick(event) {
      // console.log("click HostListener");
    }
}

我已经修复了你的 div.component.ts 文件，你必须从 div 调用 onFocus() 将其绑定为一种单向方法并发出事件查看 stackbiltz 示例 https://stackblitz.com/edit/angular-gm4hyf

Answer 2

根据我在IE11上的测试this stackblitz，当子组件的display样式属性设置为block或inline-block时触发焦点事件, 而不是 flex:

.div-class {
    display: block; 
    border: 1px solid black;
}

在 IE11 中，单击其中一个子项时，焦点事件未在具有显示弹性的可聚焦父 HTML 元素上触发

Focus event not fired on focusable parent HTML element with display flex, in IE11, when one of its children is clicked

html

css

flexbox

internet-explorer-11

onfocus