asked on

How can I get mouse x y coordinates exclusively using firefox ?? ...

Hello, I seem to have a problem which I've been trying to figure out for a few days now. I have some code that works perfect in IE, but I need to make it work also in firefox, so I ran up with some incompatibility issues, searching the Internet I found several code samples that say it works in firefox, IE, Netscape, etc. and the exact code that I see in those examples does not work with me, am I doing something wrong, is it the browser configuration, is it the browser it self ?? ... Here is a small test code:

<html>

<head>

<title>
      Mouse X, Y coordinates
</title>

</head>

<body onmousemove="showValues(window.event)">

<script type="text/javascript">
function showValues(e) {
      var posx = 0;
      var posy = 0;

      if (!e)
            var e = window.event;

      if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
      } else if (e.clientX || e.clientY) {
            posx = e.clientX + document.body.scrollLeft;
            posy = e.clientY + document.body.scrollTop;
      }

      // posx and posy contain the mouse position relative to the document
      // Do something with this information
      alert('posX = ' + posx + '\nposY = ' + posy);
}

</script>

</body>

</html>

Load this code in IE, and see how well it works, but try it out in firefox and open the java console and you will see the following message several times:
Error: e has no properties
Source File: file:///C:/apache/htdocs/test/mousemove.html
Line: 24

The problem is in window.event, does firefox support window.event, somewhere I found that window.event is only for IE, but I also found that window.event also works in firefox, so at this point I'm a bit lost with this compatibility or incompatibility issue.

In advance, thank you very much.

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Atabia

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pravin Asar

Take this one. This surely works (IE, NS, FF)

<html>
<head>
<title>Mouse X, Y coordinates</title>
</head>
<body onmousemove="showValues(event)">
<script type="text/javascript">
function getX(evt) {
      if (document.all) { return (evt.clientX); }
      return (evt.layerX);
}
function getY(evt) {
      if (document.all) { return (evt.clientY); }
      return (evt.layerY);
}
function getScrollX() {
      if (document.all) { return (document.body.scrollLeft); }
      return (window.pageXOffset);
}
function getScrollY() {
      if (document.all) { return (document.body.scrollTop); }
      return (window.pageYOffset);
}
function showValues(e) {
var posx = 0;
var posy = 0;
       posx= getX(e) + getScrollX();
       posy= getY(e) + getScrollY();
       var posStr = 'posX = ' + posx + ' posY = ' + posy
       document.getElementById('mousepos').innerHTML = posStr;
       window.status = posStr;
}
</script>
<div id="mousepos"></div>
</body>
</html>