Firefox unable to detect click events

Question

Firefox unable to detect click events

I am facing an issue with my Angular 2 website where it is not functioning correctly in Firefox. The main problem lies in the fact that Firefox does not recognize the event being passed into my TypeScript function. This event specifically pertains to a mouse click, and the function serves as a mouse click event handler.

Here is what the HTML/Angular code looks like:

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

And this is how the TypeScript code appears:

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

The error message shown in the Firefox console reads as follows:

TypeError: e is undefined

In contrast, other browsers do not require me to pass the click event into the function. Instead, I can retrieve it by calling window.event like this:

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

What is the correct method for obtaining the click event within a click event handler in Firefox while running an Angular site with TypeScript? If the code presented above is accurate, what could be causing Firefox to indicate that it does not recognize the event variable?

Thank you.

angular typescript firefox events click

Answer 1

Answer №1

When working with a shared HTML template and component.ts file, the following approach can be used:

test.component.html

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

test.component.ts

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

Alternatively,

For child to parent communication - when an event is triggered in the child component and the method is in the parent's component.ts file:

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----------*/
  }

Or,

For parent to child communication - when an event is triggered in the parent component and the method is in the child's component.ts file:

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----------*/
      }

Answer 2

When working with a shared HTML template and component.ts file, the following approach can be used:

test.component.html

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

test.component.ts

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

Alternatively,

For child to parent communication - when an event is triggered in the child component and the method is in the parent's component.ts file:

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----------*/
  }

Or,

For parent to child communication - when an event is triggered in the parent component and the method is in the child's component.ts file:

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----------*/
      }

Answer 3

Answer №2

If you want to access the event object when declaring an event in Angular, make sure to use $event instead of e. Here's an example:

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

However, from the component side, using e is also acceptable and won't cause any issues.

Answer 4

If you want to access the event object when declaring an event in Angular, make sure to use $event instead of e. Here's an example:

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

However, from the component side, using e is also acceptable and won't cause any issues.

Firefox unable to detect click events

Answer №1

test.component.html

test.component.ts

For child to parent communication - when an event is triggered in the child component and the method is in the parent's component.ts file:

child.component.html

child.component.ts

parent.component.html

parent.component.ts

For parent to child communication - when an event is triggered in the parent component and the method is in the child's component.ts file:

parent.component.html

parent.component.ts

child.component.ts

Answer №2

Similar questions

How can I apply a class to an Angular tag that already has existing CSS classes in the HTML template?

Unable to update npm packages from package.json file

Can the rxjs take operator be utilized to restrict the number of observables yielded by a service?

Eslint highlighting the initial function declaration within a Vue script

What does the 'key' parameter represent in the s3.put_object() function?

Caution: The complete loading of /node_modules/ag-grid-angular/main.js for source-map flattening is not possible

The Angular 4 HTTP patch method is encountering difficulties when called in code but functions properly when tested using Post

Steps for assigning a value from an enumerated type

How to trigger a component programmatically in Angular 6

`The Importance of Validating Enum Arrays in Typescript Using Class-Validator`

Where does tsc retrieve its definitions from when utilizing npm definitions?

Is it possible to extend the Object class in order to automatically initialize a property when it is being modified?

Chrome does not support gradient, while Firefox does

Is there a way to automatically update the button text based on the route name without requiring user interaction?

Tips on creating a unit test for validating errors with checkboxes in your code base

Exploring alternative applications of defineModel in Vue 3.4 beyond just handling inputs

TypeScript React Object.assign method return type

Failure to load dependencies for deprecated Angular2 router

Preventing data loss in an Ionic array - encountering issues with using this.array.push

Exploring Array Iteration in a subscribe and ngOnInit Function