click event not recognized in Firefox

**gib65** · 11-08-2017, 04:38 PM

Hello,

I have an Angular 2 site which is not completely working in Firefox. The problem is that it doesn't recognize the event that I pass into my typescript function. The event is a mouse click and the function is a mouse click event handler.

The html/angular code looks like this:

Code:

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

The typescript looks like this:

Code:

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

The error I get in the Firefox console is:

TypeError: e is undefined

In all other browsers, I don't have to pass in the click event to the function. I can get it with a call to window.event like so:

Code:

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

What is the proper way to get the click event in a click event handler in Firefox running an angular site with typescript? If I'm doing it right in the above code, what could be causing it to say it doesn't recognize the event variable?

Thanks.

**jscheuer1** · 11-08-2017, 04:58 PM

Don't know angular but I wonder if this:

Code:

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

The typescript looks like this:

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

works in any browser?

I'd try (again, don't know angular, but this seems better to me):

Code:

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

The typescript looks like this:

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

or maybe (less hopeful about this one):

Code:

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

The typescript looks like this:

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

**gib65** · 11-08-2017, 06:07 PM

Turns out this is how it's done:

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

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

event can be named however you want in the function.