在IE11中，当单击其子元素之一时，未在具有display flex的可聚焦父HTML元素上激发聚焦事件

更新了IE11中的问题（更孤立的示例）。当父元素（tabindex=0且显示为flex）的子元素为

或

时，单击IE11中的文本将不会触发焦点事件。这在其他浏览器中运行良好，也适用于IE11和

或

的子级。多亏了@ConnorsFan，解决方案之一是在父级上使用

display:block

，而不是

display:flex

。然而，这似乎是IE11中的一个bug

原始邮政：

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

替换为并使用stopPropagation（）可能是一个选项，但它也不起作用，并且会传播事件（在hostListener中取消注释焦点）。我只需要关注自定义组件。

从'@angular/core'导入{component，OnInit，HostListener，HostBinding}；
   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”，
模板：`单击以看到一些神奇的事情发生：）`，
样式：[`.div类{display:flex；border:1px纯黑；}`]
})
导出类组件{
@主机绑定（'attr.tabindex'）
公共索引=0；
@主机绑定（'attr.class'）
获取主机类（）：字符串{
返回'div class'；
}
@HostListener（'焦点'，['$event']））
//@HostListener（'focusin'，['$event']））
公众焦点（事件）{
log（“关注我的div”，document.activeElement）；
//event.stopPropagation（）；
}
@HostListener（'单击'，['$event']））
公共onClick（事件）{
//log（“单击HostListener”）；
}
}

我已经修复了div.component.ts文件，您必须从div中调用onFocus（），并将其作为单向方法绑定，然后发出事件

---

签出stackbiltz示例

根据我在IE11上的测试，当子组件的

显示

样式属性设置为

块

或

内联块

，而不是

柔性

，会触发焦点事件：

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

---

非常感谢。我已经这样做了，但这也不是一个选择。问题是，我需要在自定义元素上使用事件处理程序，因为它可以使用模板，并且有人可以替换，因此它将无法工作。首先，我想了解的是，这是否是IE11中的一个bug。无论如何，谢谢你！你真的需要flexbox吗？当使用

：host.div-class{display:block；border:1px纯黑；}

将显示器设置为

块

或

内联块

时，它似乎起作用。谢谢，@ConnorsFan！它起作用了。我仍然想知道：host（正确应用样式不需要）：host）和display:block的组合为什么会触发焦点事件？当显示为block时，子div将采用父维度，在IE11中，这在某种程度上对焦点事件没有问题？但是为什么在这种情况下还需要：host呢？好的，IE11和display:flex的问题在纯HTML div上可用，在angular项目之外，在这里它是隔离的（codepen.io/lipata/pen/GBjYPK）。我已经更新了上面的原始帖子。需要：主机，因为我将父主机的样式放在div.component.css中，这是不正确的，现在我将其移动到app.component.css中，它应该在哪里。因此：主机是必需的，因为样本中有一个问题，我已经纠正了@如果你愿意，你可以发布一个答案，我会验证它（没有：主机）。非常感谢。