title: HTML weird ReferenceError while trying to make a mouse tracker
body: <p>I'm making a project where i need a mouse tracker, so this is a super simple version i found online but it gives an error (while working). On my mozilla it's actually updating as i move around the mouse on the site, but for some reason it spawns the "e is not defined" error instead of posting the coordinates</p>
  
  <p></p>
  
  <pre><code>&lt;svg id='canvas' onmousemove="setMousePosition(e)"&gt;
  &lt;/svg&gt;
  
  &lt;script&gt;
      function setMousePosition(e) {
          var x = e.clientX;
          var y = e.clientY;
          console.log("x coord" + x + "y coord" + y);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>Which gives the error </p>
  
  <blockquote>
    <p>"ReferenceError: e is not defined"</p>
  </blockquote>
  
  <p>, which i find super weird... Using mozilla firefox 54'</p>
  
  <p>EDIT: chrome gives</p>
  
  <blockquote>
    <p>"Uncaught ReferenceError: e is not defined
        at SVGSVGElement.onmousemove (mainhtml.html:24)"</p>
  </blockquote>
  
  <p>, so im thinking it's connected to the SVG element..? </p>
  
  <p>EDITEDIT: found a workaround by having an empty div covering the svg element which seems to be bugging</p>