Using JavaScript / jQuery event handler in Firefox

Question

I have a jQuery function that submits a form via menu navigation functions:

$(function () {
    $('#sidebarmenu1 a').on('click', function () {
        var url = $(this).attr('href');
        $('#myform').attr('action', url);
        $("#myform").submit();
        if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; }
    })
});

This section:

if (event.preventDefault) 
{ event.preventDefault(); } 
else 
{ event.returnValue = false; }

Prevents the default action of the sidebar button (I think - still new to this) i.e. to simply navigate to a page.

It is written in this way to keep IE happy, because preventDefault isn't defined for IE (might be using incorrect terminology there, but IE doesn't like preventDefault.)

However now this throws up an error in Firefox, because (as I read on other Stack questions) event is not globally defined for Firefox! I get the following error:

ReferenceError: event is not defined

Now according to this Stack question: event is not defined in FireFox, but ok in Chrome and IE

In IE and Chrome, event is resolving to window.event. Firefox doesn't have this property and instead provides an event to an event handler function by passing it as a parameter. jQuery abstracts this difference for you by providing an event object parameter in all browsers.

But I thought I was using jQuery here and am still getting the issue.

Sorry if I'm making basic mistakes, self teaching myself js and jQ. Any help much appreciated.

Sushanth -- · Accepted Answer · 2012-11-30T23:55:41.323

3

This should do..

$(function() {
    $('#sidebarmenu1 a').on('click', function(e) {
        var evt = e || window.event;
        var url = $(this).attr('href');
        $('#myform').attr('action', url);
        $("#myform").submit();
        evt.preventDefault();
    })
});

edited Nov 30 '12 at 23:55

answered Nov 30 '12 at 23:48

Sushanth --

55,259
9
66
105

Works perfectly, thank you. If you have time to explain - what is this? You've defined "e" as either "e" OR a window.event, so then when Firefox examines e.preventDefault(); it tries out "e" (shorthand for event? finds it undefined, but lets it pass because it understands "window.event"? – Gideon Nov 30 '12 at 23:56
1

e || window.event .. means if e is not defined it will assign it to window.event .. To make things clear I will change the variable in the post.. e works in All the modern browsers, But IE 7 I don't think it works.. So it will use window.event then – Sushanth -- Nov 30 '12 at 23:59
Thank you, I'll read some more about e. Thanks for clarifying your post with the "evt" edit. – Gideon Dec 01 '12 at 00:02

Musa · Answer 2 · 2013-05-07T19:18:45.777

2

If you use the event object jQuery passes to the event handler you wont have problems

$('#sidebarmenu1 a').on('click', function (event) {
    var url = $(this).attr('href');
    $('#myform').attr('action', url);
    $("#myform").submit();
    event.preventDefault();
})

edited May 07 '13 at 19:18

answered Nov 30 '12 at 23:49

Musa

96,336
17
118
137

wolfstevent · Answer 3 · 2013-11-18T17:46:01.967

If I had a couple of more points I would up-vote the second answer (passing in the jQuery 'event' argument).

I had unknowingly relied on the global event defined by browsers other than Firefox. I went back through my code and ensured I was always specifying the event parameter on all click events.

E.g.

            $('#situationTextInput')
                .val('')
                .fadeTo(1000, 1.0)
                .focus()
                .off('keydown')
                .on('keydown', function (event) {
                    VsUtils.handleSpanishTextKeydown(event);
                });

I've also gotten into the habit of calling .off prior to .on as most of my code is using single pages, reusing content. Without the .off I was inadvertently stacking up events (even if they were the same callback) in subsequent steps of the dialog.

A side effect of changing my code to pass on 'event' directly to the handler was the binding to 'this.' changed. I chose to refactor the code to change 'this.' references to 'event.currentTarget.'

Using JavaScript / jQuery event handler in Firefox

3 Answers3