Results 1 to 4 of 4

Thread: click event not recognized in Firefox

  1. #1
    Join Date
    Jun 2008
    Posts
    187
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default click event not recognized in Firefox

    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.
    Last edited by keyboard; 11-09-2017 at 12:00 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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();
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Posts
    187
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Oddly, makes sense.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. adding on click event
    By noobie123 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-09-2014, 01:09 PM
  2. How to fire click event of an LI tag?
    By round in forum JavaScript
    Replies: 12
    Last Post: 01-16-2013, 01:59 PM
  3. [HELP] Click event inside javascript
    By 4rum25 in forum JavaScript
    Replies: 0
    Last Post: 09-14-2010, 07:51 AM
  4. MooTools: Problem with click event.
    By JBottero in forum JavaScript
    Replies: 2
    Last Post: 08-31-2009, 12:28 PM
  5. click event for <select> <option>
    By HockeyFan in forum HTML
    Replies: 4
    Last Post: 09-17-2005, 04:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •