在 IE11 中，当单击其子元素之一时，焦点事件未在具有显示 flex 的可聚焦父 HTML 元素上触发答案

【问题标题】：Focus event not fired on focusable parent HTML element with display flex, in IE11, when one of its children is clicked在 IE11 中，当单击其子元素之一时，焦点事件未在具有显示 flex 的可聚焦父 HTML 元素上触发
【发布时间】：2018-12-26 12:53:16
【问题描述】：

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

原帖：

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

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

【问题讨论】：

你绝对需要 flexbox 吗？当使用:host.div-class { display: block; border: 1px solid black; } 将显示设置为block 或inline-block 时，它似乎可以工作。
谢谢你，@ConnorsFan！有用。我仍然想知道为什么 :host （正确应用样式不需要）和 display:block 的组合会导致焦点事件触发？当显示被阻止时，子 div 将采用父维度，在 IE11 中这似乎对焦点事件没问题？但是为什么在这种情况下还需要 :host 呢？
好的，IE11 和 display:flex 的问题在纯 HTML div 和外部 Angular 项目中可用，这里是隔离的 (codepen.io/lipata/pen/GBjYPK)。我已经更新了上面的原始帖子。 :host 是必需的，因为我已将父主机的样式放在 div.component.css 中，这是不正确的，现在我将它移到 app.component.css 中，它应该在的位置。因此，由于示例中存在问题，因此需要 :host，我已对其进行了更正。 @ConnorsFan 如果你愿意，你可以发布一个答案，我会验证它（没有 :host）。谢谢！

标签： html css flexbox internet-explorer-11 onfocus

【解决方案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

【讨论】：

谢谢！我已经这样做了，但这也不是一个选择。问题是我需要在自定义元素上使用事件处理程序，因为它是模板化的，并且有人可以替换
，因此它不起作用。首先，我想了解的是，这是否是 IE11 中的错误。无论如何，谢谢！

【解决方案2】：

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

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

【讨论】：