点击事件在Firefox中无法识别

Question

我有一个Angular 2网站，但在Firefox中并不完全正常。问题是它无法识别我传递给我的打字稿函数的事件。该事件是鼠标单击，该功能是鼠标单击事件处理程序。

html / angular代码如下所示：

<div class="click-to-filter-outer" (click)="clickToFilter_Clicked(e)">

打字稿看起来像这样：

clickToFilter_Clicked(e) {
    $('.filter-panel').css('max-height', '500px');
    this.filterPanelState = this.filterPanelStates.EXPANDED;
    e.stopPropagation();
}

我在Firefox控制台中遇到的错误是：

TypeError: e is undefined

在所有其他浏览器中，我不必将click事件传递给该函数。我可以通过调用window.event来实现它：

clickToFilter_Clicked() {
    $('.filter-panel').css('max-height', '500px');
    this.filterPanelState = this.filterPanelStates.EXPANDED;
    window.event.stopPropagation();
}

在Firefox中运行带有打字稿的角度网站的点击事件处理程序中获取点击事件的正确方法是什么？如果我在上面的代码中正确地做了什么，可能会导致它说它无法识别事件变量？

感谢。

Answer 1

为了在声明事件时捕获事件对象，您必须使用$event而不是e，如下所示：

<div class="click-to-filter-outer" (click)="clickToFilter_Clicked($event)"></div>

此外，从组件方面来说，您可以使用e，这不会导致任何问题。

Answer 2

如果你的html模板是相同的component.ts，那么，

test.component.html

<div class="click-to-filter-outer" (click)="clickToFilter_Clicked($event)">

test.component.ts

clickToFilter_Clicked(param1) {
/*---------------------*/
}

或者，

子到父通信 - 如果在子进程中发生事件，则方法在parent.component.ts

中

child.component.html

<div class="click-to-filter-outer" (click)="clickToFilter_Clicked($event)">

child.component.ts

@Output() loadEvent = new EventEmitter<any>();

  clickToFilter_Clicked(param1): any {
    this.loadEvent.emit({ param1 });
  }

parent.component.html

<child-cmp (loadEvent)=loadEvt($event)></child-cmp>

parent.component.ts

loadEvt = ($event) => {
    this.clickToFilter_Clicked($event.param1);
  }

 clickToFilter_Clicked(param1): any {
   /* --------logic implementation----------*/
  }

或者，

父级到子级通信 - 如果事件发生在父级，而方法位于child.component.ts

parent.component.html

<div class="click-to-filter-outer" (click)="clickToFilter_Clicked($event)">

parent.component.ts

 @ViewChild(childComponent)
  public child: childComponent;

  getChildMethod(param1): any {
        this.child.clickToFilter_Clicked(param1);
      }

child.component.ts

 clickToFilter_Clicked(param1): any {
       /* --------logic implementation----------*/
      }