1

假设我想在用户每次点击<a>标签时提醒他。 

document.querySelector('body').addEventListener('click', function (event : any) {
            if (event.target.tagName === 'A') {
                event.preventDefault();
                alert('Congratulations! A tag clicked!!!');
            }
        });

如果我把这个绑定放在constructor（on in ngOnInit()）中，每次我访问这个组件（路由器链接）时，我都会有新的绑定（和一个警报）。
在第一次初始化时只绑定一次的方法是什么？

同时我使用removeEventListener()in ngOnDestroy()。好像很丑。有更好的吗？

4

1 回答 1

1

似乎您需要检查您的元素上是否已经存在所需的事件侦听器。请参考：如何检查动态附加的事件监听器是否存在？

基于这个答案，我建议使用这样的东西（至少对我有用）：

function showAlert(evt) {
  evt.preventDefault();
  alert('Congratulations! A tag clicked!!');
}

  const aTags = document.querySelectorAll('a');
  for (const i in aTags) {
    const element = aTags[i];
      if (element instanceof Element && element.getAttribute('listener') !== 'true') {
        element.addEventListener('click', showAlert);
        element.setAttribute('listener', 'true');
    }
  }

如果您需要像示例中那样将事件侦听器绑定到整个主体，则可以使用静态变量。只需在组件的开头创建一个并在绑定事件侦听器之前检查它的值。例如：

export class CongratulationsComponent implements OnInit {
  static flag = true;
  constructor() {}

  ngOnInit() {
    if (CongratulationsComponent.flag) {
      document.querySelector('body').addEventListener('click', function (event: any) {
        if (event.target.tagName === 'A') {
          event.preventDefault();
          alert('Congratulations! A tag clicked!!!');
        }
      });
      CongratulationsComponent.flag = false;
    }
  }
}
于 2017-12-26T01:02:00.870 回答