Using JavaScriptjQuery event handler in Firefox - Stack Overflow

admin管理员组

文章数量:1414614

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.

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.

• javascript
• jquery
• jquery-events

Share Improve this question Follow edited Oct 5, 2022 at 18:45 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 30, 2012 at 23:46 GideonGideon 1,88644 gold badges4141 silver badges7171 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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();
    })
});​

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

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 JavaScriptjQuery event handler in FirefoxStack Overflow