Как обнаружить щелчок за пределами элементов, когда существует событие «click» для элементов - PullRequest
Новая
       9

Как обнаружить щелчок за пределами элементов, когда существует событие «click» для элементов

0 голосов
/ 22 апреля 2019

Я создаю директиву Angular, пожалуйста, помогите мне, как можно обнаружить каждое событие для элементов «щелчка» и «щелчка» внешних элементов в Angular (7). 

@Hostlistener ('click', ['$event']) onClick(){}

для нажатия элементов (кнопка здесь) 

@Hostlistener ('document:click', ['$event'] outClick(){}

для щелчка в любом случае в документе.Но это также указывает на элементы.

Уже одно событие щелчка для элементов существовало при щелчке по внешним элементам, только признайте, что это не элементы.

1 Ответ

1 голос
/ 22 апреля 2019

Внутри логики событий клика вы можете проверить, находится ли позиция клика внутри элемента. Попробуйте что-то вроде этого: 

@ViewChild('elementName') element: ElementRef;

@Hostlistener ('click', ['$event']) onClick(e: MouseEvent) {
  if (this.element.nativeElement.contains(e.target)) {
    // Logic for click inside
  } else {
    // Logic for click outside
  }
}

где elementName - это имя ссылочной переменной для элемента в шаблоне компонента с использованием синтаксиса #. Декоратор ViewChild привязывает свойство к элементу в вашем шаблоне, чтобы вы могли проверить цель щелчка по нему в функции обработчика событий. Например, как назвать элемент в вашем шаблоне: 

<button #elementName>Click Me</button>
...