Question

我正在创建Angular指令，请帮助我可以检测Angular（7）中“ click”元素和“ click”外部元素的每个事件。

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

用于单击元素（在此处单击按钮）

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

在文档中仍然可以单击。但这也表明了要素。

单击外部元素时已经存在元素的一键单击事件，只能识别它不是元素。

Answer 1

在点击事件逻辑中，您可以检查点击位置是否在元素内。尝试这样的事情：

@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装饰器将属性绑定到模板中的元素，以便您可以在事件处理函数中针对该对象检查click目标。例如如何命名模板中元素的示例：

<button #elementName>Click Me</button>

存在元素的“单击”事件时如何检测元素外部的单击

1 个答案: