JQuery event does not work in Firefox under Windows10

Question

Community marked my problem as duplicate, but as far as I can tell, it is not duplicate. The question was not: how to handle an event for Firefox, but rather: Why does this code NOT work in Firefox under Windows-10, although it does work in all other environments !!

JQuery event works fine in all tested environments, but not in Firefox under Windows10

Example program is an extract of a more complicated program. When you click on the link, an alert popup should display coordinates. It works in Firefox under Windows7 and Windows8.1, Android, IE, Chrome, Edge (under Windows10), but does NOT work in Firefox (Version 60.8.0esr (32-bits)) under Windows10. Errormessage: ReferenceError: event is not defined. Unfortunately cannot debug this any further, because this happens on a W10 machine from a friend. I myself have W7. According to literature, Firefox itself does not handle events (is that correct?), but JQuery should be able to handle this elegantly. To be sure that JQuery 'knows' W10, I'm using the latest version of JQuery. Could the problem be some specific Firefox setting ?

Maybe relevant: The PC with the errormessage has the Englisch language version of Windows-10 and the Dutch language version of Firefox.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .myStyle {text-decoration:underline; color:blue; display:inline; cursor:pointer;}
    </style>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
    <script type="text/javascript">
      function display_output() {
        alert("Value for event.pageX: " + event.pageX + "\nValue for event.pageY: " + event.pageY); 
      } 
    </script>
  </head>
    <body>Please
      <span class="myStyle" onclick="display_output();"> Click here</span> to see the coordinates.
    </body>
</html>

Expected result: a normal popup (generated by the alert statement) showing 2 values. This popup shows correctly except in Firefox under Windows10: nothing is shown, but after F12 the console window shows: ReferenceError: event is not defined.

What does make it a jQuery event? you should declare your function with event display_output(event) {} — Novy, Jul 28 '19 at 19:06
Is this a jQuery question? Seems like pure JavaScript as posted for the event? Is Javascript turned off in the browser? — Mark Schultheiss, Jul 29 '19 at 12:05
But you aren't actually using jQuery, and should probably use `addEventListener` instead of `onclick` attributes. — zero298, Jul 29 '19 at 17:34

Novy · Answer 1 · 2019-08-01T08:50:20.750

0

What does make it a jQuery event?

DOM Standard "concept-event-listener" section says:

An event listener can be used to observe a specific event and consists of:

type (a string)
callback (null or an EventListener object)
capture (a boolean, initially false)
passive (a boolean, initially false)
once (a boolean, initially false)
removed (a boolean for bookkeeping purposes, initially false)

Although callback is an EventListener object, an event listener is a broader concept as can be seen above.

You should declare your function with event

display_output(event) {...}

and call it with event

display_output(event);

with jquery you will have something like this below in the snippet:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <style>
      .myStyle {text-decoration:underline; color:blue; display:inline; cursor:pointer;}
    </style>
   
    <script type="text/javascript">
     
      $(document).ready(function(){
          $("#clickIt").click(function(event){
             alert("Value for event.pageX: " + event.pageX + "\nValue for event.pageY: " + event.pageY); 
          });
      });
    </script>
  </head>
    <body>Please
      <span id="clickIt" class="myStyle" > Click here</span> to see the coordinates.
    </body>
</html>

edited Aug 01 '19 at 08:50

answered Jul 28 '19 at 19:11

Novy

1,436
1
14
26

Thanks for your feedback, and I could do so, but why should I, when it works OK in Firefox under Windows7 ! – R.E. Tired Jul 29 '19 at 08:00
1

because maybe under win 7 there are some errors with FF? win 7 is at the end of it's life anyhow, so I wouldn't spend too much developing for this win version. – cloned Jul 29 '19 at 11:48
Thanks @cloned, I could not explain it in a better way. I can add that R.E Tired you should use thing that works everywhere and not almost by accident. It is the way it is handled. The event seems not in global scope like in the old days "window.Event". You can have more [here](https://www.quirksmode.org/js/events_access.html) – Novy Jul 29 '19 at 12:20
Dear Cloned, the issue is not Windows7, the issue is that the program works in all browsers, except Firefox under Windows-10 !! – R.E. Tired Jul 29 '19 at 13:58
I'm aware that Firefox doesn't have a window.event property, like e.g. Chrome and IE have, but isn't this where JQuery should come to the rescue: isn't it supposed to abstracts this difference by providing a global event in all browsers ? – R.E. Tired Jul 29 '19 at 14:16
Anyway, to get the program function correctly in Firefox under Windows10, I'll try to implement Novy's idea. BTW, was not under the impression that I used things that worked 'by accident' :-) – R.E. Tired Jul 29 '19 at 14:18
as @zero298 said you don't use jquery in your code. I did not see jquery as a polyfill. But my understanding is limited here. But even if you use jquery. You have to pass the event to your function see the example. For me that means your assumption is not right about jquery but who knows. I am not really like function that uses external variables. I my point of your the dependency function should always be injected in your function as a parameter that is why i said it works by accident as a function. I did not want to be rude or something! – Novy Jul 30 '19 at 07:08
What was (and is) frustrating for me is the fact that my code runs in many browsers (all the browsers that have a windows.event property) but it also runs in Firefox under Windows7, and Firefox, according to literature does not supply this directly, you have to use the event parameter. But maybe I read the wrong literature... This problem, again from literature, is dealt with by JQuery, so that from a programmer’s point of view you can use the same code in all browsers. Therfore I used the JQuery tag, and not the Javascript tag. – R.E. Tired Jul 30 '19 at 13:43
@Novy. Thanks for your remarks and your extra effort to include code. As I already mentioned, I implemented your first suggestion and now the code works under Firefox within Windows10. @ Mark Schultheiss, thanks for taking away the ‘duplicate’ remark, and see above why I mentioned this as a JQuery problem. – R.E. Tired Jul 30 '19 at 13:43
Thanks to everybody for their comments, but still I wonder: why the difference under Firefox in W7 and W10... Anyway, the much larger program (of which my code was just a tiny extract) now works correctly, thanks to all your input. – R.E. Tired Jul 30 '19 at 13:43
Happy for you. It is not the same version of firefox on both OSes, right? Firefox version in your w10 implements the standard that does say your callback is part of an event listner that can be used to observe any event. Most important the callback signature is callback (null or an EventListener object). It means that it is your function that should pass it as an argument if you want to use it, it can not be a global variable in the window element as ie or chrome does. – Novy Aug 01 '19 at 08:44

JQuery event does not work in Firefox under Windows10

1 Answers1