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-30 23:55:41Z

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, 2012 at 23:55

answered Nov 30, 2012 at 23:48

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gideon Over a year ago

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"?

Sushanth -- Over a year ago

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

Gideon Over a year ago

Thank you, I'll read some more about e. Thanks for clarifying your post with the "evt" edit.

Musa · Accepted Answer · 2013-05-07 19:18:45Z

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 7, 2013 at 19:18

answered Nov 30, 2012 at 23:49

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Comments

wolfstevent · Accepted Answer · 2013-11-18 17:46:01Z

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.'

Collectives™ on Stack Overflow

Using JavaScript / jQuery event handler in Firefox

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related