Firefox error: "Event is not defined" despite passing "event" as function argument

Question

Let's assume I want a custom function to handle page transitions. There are event listeners for "click" on both links and div elements on the page. Obviously, in the case of links, I would like to prevent the default link action so that my function can take over redirecting the page after the transition effect is finished.

The jsfiddle below is a simplified example. It works in Chrome, IE, Opera but Firefox throws a ReferenceError: event is not defined

https://jsfiddle.net/hty7tsty/9/

HTML

<div id="div">Div</div>
<a id="link" href="#">Link</a>
<div id="result" style="display:none">Clicked</div>

JS

$('#div, #link').click(myfunc(event));

function myfunc(event){

    return function(){
    if(event) { event.preventDefault(); }
    $('#result').show();
  }

}

There are ways for me to avoid the problem, for example, not using <a> elements, but I would like to understand why Firefox behaves differently.

score 3 · Accepted Answer · answered Dec 29 '17 at 14:45

3

Use this code instead , firxfox expects a function with the event passed to it as a parmater but in your code the returned function from calling myfun() doesn't have a parameter called event so it will return undefined use this example

$('#div, #link').click(myfunc());

function myfunc(){

 return function(event){
    if(event) { event.preventDefault(); }
    $('#result').show();
  }
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">Div</div>
<a id="link" href="#">Link</a>
<div id="result" style="display:none">Clicked</div>

answered Dec 29 '17 at 14:45

mostafa tourad

4,308
1
12
21

Reading through other Stackoverflow questions regarding this particular Firefox error, I was under the impression that Firefox expects the "event" to be passed as a "parameter to the handler" (editted). https://stackoverflow.com/questions/20522887/referenceerror-event-is-not-defined-error-in-firefox Edit: indeed the jsfiddle works once I incrporate your changes, I am just not sure why in this case the "event" does not need to be passed to the handler. – Adi Dec 29 '17 at 15:00
Oh, I think I see the difference between my case and the ones I had read previously. It's because I am not using an anonymous function so I can give it the "event" parameter when I define the function and then pass the function to the even handler without invoking it, like in Jonathan Dion's answer. I will chose your answer because your explanation helped me see where i was wrong. – Adi Dec 29 '17 at 15:26

Jonathan Dion · Answer 2 · 2017-12-29T15:41:13.277

1

Pass your function but don't invoke it.

function myfunc(event){
    if(event) { event.preventDefault(); }
    $('#result').show();
}

$('#div, #link').click(myfunc);

edited Dec 29 '17 at 15:41

answered Dec 29 '17 at 14:42

Jonathan Dion

1,651
11
16

Your code solved the problem. I chose the other answer because it helped me understand where I was making the mistake. I thought the "event" was required when passing the function to the even handler. But if I understand correctly, Firefox actually requires it when you define the function. Thanks! – Adi Dec 29 '17 at 15:30

Firefox error: "Event is not defined" despite passing "event" as function argument

2 Answers2