Событие ionBlur: обнаружение элемента, который получает фокус

Question

Из пользовательской директивы я хочу определить, какой элемент получает фокус при возникновении события размытия:

@Directive({
  selector: '[my-directive]',
  host: {
    //...
    '(ionBlur)': 'onBlur($event)'
  }
})
export class MyCustomDirective implements OnInit {
    //...
    onBlur($event) {
        console.log(event) // This logs a CustomEvent that contains information only about the element that losing the focus
        console.log(event.relatedTarget) // This logs undefined
    }
    //...
}

Я использую эту директиву с элементом ion-input:

<ion-input my-directive></ion-input>

При тестировании параметр event метода onBlur содержит атрибуты target и currentTarget, которые оба являются элементом, который теряет фокус, , но event.relatedTarget было неопределено:

Возможно ли иметь элемент, который также получает фокус?

Answer 1

Я использую Ionic 4, и для меня, что работало лучше всего:

onFocusLostEvent() {
    let input = event['target'] as HTMLElement;
    console.log(input.id); // the id of the ion-input object for its identification
}

Answer 2

Прежде всего, вам понадобится Hostlistener для наблюдения за событиями размытия.И когда вы ловите событие размытия с помощью HostListener:

  @HostListener('ionBlur', ['$event'])
  onBlur($event: FocusEvent) {
    console.log(event)
  }

Вы можете видеть, что relatedTarget доступен

Но

    console.log(event.relatedTaget)

выдаст ошибку компилятора.

Поскольку это структура JSON, для ее получения я предлагаю следующее:

console.log(event['relatedTarget'])

, тогда вы получите следующее:

Демо