angular - 我不知道如何修复 HostListener 上的点击事件

Question

嗨，伙计们，我正在使用keyup事件显示一个 div。每当我单击 keyup 事件时，也使用 clickoutside 事件 clickoutside 事件也会触发。谁能告诉我如何解决这个问题？

使用 HostListener 模块。

 @HostListener('keyup')
   click(){
     console.log('inside keyup');
    }
 @HostListener('document:click')
 cickout(){
   console.log('clicked outside');
  }

标签： angulartypescript

Answer 1

您可以检查单击的元素是否是输入并将您的逻辑基于此：

@HostListener('document:click', ['$event'])
cickout(event) {
  if (event.target.tagName == "INPUT") {
    console.log('input is clicked');
  } else {
    // do stuff
  }
}

演示：StackBlitz