在Firefox中使用javascript / jQuery事件处理程序

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) ie to simply navigate to a page.

It is written in this way to keey 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 FF! I get the following error:

ReferenceError: event is not defined

Now acorrding 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, thanks!

Answer 1

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

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

Answer 3

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.

Eg

            $('#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.'