首页 文章

在IE11中，当单击其中一个子项时，焦点事件不会在具有display flex的可聚焦父HTML元素上触发

提问于
浏览 次
1

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

ORIGNAL POST：

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

用focusin替换focus并使用stopPropagation（）可能是一个选项，但它也不起作用并传播事件（取消注释focusin hostlistener） . 我需要只关注自定义组件的焦点 .

html css3 flexbox internet-explorer-11 onfocus

2 回答

  • 1

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

    .div-class {
    display: block; 
    border: 1px solid black;
}
    回复于
  • 0
    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（）将它绑定为单向方法并发出事件checkout stackbiltz示例https://stackblitz.com/edit/angular-gm4hyf

    回复于

相关问题