How to get mouse cursor coordinates in raphaeljs library?

I'm trying something like:

rect.mousemove(function (event) {
        thisGrid.Popup.Show(event.layerX, event.layerY, ["clientX:", event.clientX, " clientY:", event.clientY, "\n", "layerX:", event.layerX, "layerY:", event.layerY, "\n",
            "pageX:", event.pageX, "pageY:", event.pageY].join(' '));

                        }
                    );

But all this properties return coordinates relative left upper corner of window or something.

Here is screenshot

How to get mouse cursor coordinates in raphaeljs library?

I'm trying something like:

rect.mousemove(function (event) {
        thisGrid.Popup.Show(event.layerX, event.layerY, ["clientX:", event.clientX, " clientY:", event.clientY, "\n", "layerX:", event.layerX, "layerY:", event.layerY, "\n",
            "pageX:", event.pageX, "pageY:", event.pageY].join(' '));

                        }
                    );

But all this properties return coordinates relative left upper corner of window or something.

Here is screenshot

• javascript
• raphael

3 Answers 3

I too had this issue a while back. You need to take into account the current div. In my case the div was called canvas. For the co-ordinates I used the following:

posx = e.pageX - $(document).scrollLeft() - $('#canvas').offset().left;
posy = e.pageY - $(document).scrollTop() - $('#canvas').offset().top;

Note: I was also using jQuery too hence the use of $. You can use document.getElementById if you prefer not to use jQuery.

If you want coordinates relative to your div, try to use event.offsetX/offsetY

compute with position of event source element (event.srcElement)