Question

In IE 7, 8, 9, chrome, and firefox the pageX/Y property on a mouseHandler refers to the position relative to the top of the page, while the clientX/Y property gives the position relative to the current viewport. In IE 10, it looks like pageX/Y is the same as clientX/Y. Is there a known work around?

You can experiment with this http://jsfiddle.net/FCTUW/2/ just scroll to the bottom of the page in the bottom right and move your mouse over the grey rectangle.

Here is the code used to find the coordinates since SO wants code…

canvas.mousemove(function(e){
var pageCrds = '('+ e.pageX +', '+ e.pageY +')',
    clientCrds = '('+ e.clientX +', '+ e.clientY +')';

Does anyone know why this change was made, or how to get the correct page coordinates?

Answer 1

I’m not seeing the same results you are. You may not be viewing the actual results of your script – or perhaps you accidentally wrote the same property twice. Either way, the results I have below are from Internet Explorer 10, on Windows 8, running your demo.

This is in line with what MSDN states regarding client and page values:

Client coordinates do not reflect the scroll offset of the page. To get the mouse pointer’s coordinates relative to the upper-left corner of the document, use the pageX and pageY properties.