CODEWITHSUNDEEP
javascripthtmlfirefoxmouseevent
leoll2
leoll2

Reputation: 163

ReferenceError: event is not defined - Firefox

I have a problem running this code with Firefox (version 32.0)

<!DOCTYPE html> 
<html>
  <head>
    <title>Test A</title>

    <script>
      function showCoords(evt){
        alert(
          "clientX value: " + evt.clientX + "\n" +
          "clientY value: " + evt.clientY + "\n"
        );
	}

	function begin(){
	parag = document.getElementById("parag");
	parag.addEventListener("click", function () {showCoords(event); }, false);
      }
    </script>
  </head>
  <body onload = "begin()">
    <p id="parag">To display the mouse coordinates click in this paragraph.</p>
  </body>
</html>

It works in Chrome and other browsers, though when I run it with Firefox 32.0 it gives me this error:

ReferenceError: event is not defined

On the contrary, this code works in Firefox without errors:

<!DOCTYPE html> 
<html>
  <head>
    <title>TestB</title>

    <script>
      function showCoords(evt){
        alert(
          "clientX value: " + evt.clientX + "\n" +
          "clientY value: " + evt.clientY + "\n"
        );
      }
    </script>
  </head>
  <body>
    <p onclick="showCoords(event)">To display the mouse coordinates click in this paragraph.</p>
  </body>
</html>

Can anyone tell me why the former code doesn't work while the latter does? Again, both work in Chrome but the first is buggy in Mozilla Firefox (32.0). Thank you in advance.

Note: don't tell me to update the browser (I must use it) nor to use jquery or similar.

Upvotes: 0

Views: 6008

Answers (3)

Tonni
Tonni

Reputation: 134

Firefox does not have the global window.event available, even the latest version(53.0), but Chrome has.

Upvotes: 1

attempt0
attempt0

Reputation: 834

Not sure if it worked in Firefox because I don't want to use Firefox.

<!DOCTYPE html> 
<html>
  <head>
    <title>Test A</title>
    <script>
      function showCoords(evt){
        alert(
          "clientX value: " + evt.clientX + "\n" +
          "clientY value: " + evt.clientY// + "\n"
        );
    	}
      function begin(){
        parag = document.getElementById("parag");
        parag.addEventListener("click", function(e) {showCoords(e);}, false);
      }
    </script>
  </head>
  <body onload="begin()">
    <p id="parag">To display the mouse coordinates click in this paragraph.</p>
  </body>
</html>

Upvotes: 1

Edin
Edin

Reputation: 32

Try sending event to the begin function like this begin(event) and then send it to the showCoords function on the js side

Also in the js when accepting the event, u can try this, event = e || windows.event so u can be sure that all browsers get covered

Upvotes: 0

Related Questions