Cursor position in IE

[wizzud]

Cursor position reported by event.pageX and event.pageY is out by a couple of pixels, due to clientX and clientY starting from 2,2 in standards mode (0,0 in quirks mode). The solution is to modify the fix method of jQuery.event such that...

// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
  var e = document.documentElement, b = document.body;
  event.pageX = event.clientX + (e && e.scrollLeft || b.scrollLeft || 0);
  event.pageY = event.clientY + (e && e.scrollTop || b.scrollTop || 0);
}

becomes...

// Calculate pageX/Y if missing and clientX/Y available
if ( event.pageX == null && event.clientX != null ) {
  var e = document.documentElement||{}, b = document.body||{};
  event.pageX = event.clientX + (e.scrollLeft || b.scrollLeft || 0) - (e.clientLeft || 0);
  event.pageY = event.clientY + (e.scrollTop || b.scrollTop || 0) - (e.clientTop || 0);
}

NB. Solution/explanation based on

​http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning

[brandon]

Fixed in rev [3584]

[wit]

In IE when page is zoomed event position is related from zoom but Firefox/Opera have position which is not related from zoom.

for example: if point has coords left:10px; top:10px. page is zoomed by 200%, then after click on this point: Firefox/Opera will have event.pageX = 10, event.pageY = 10 IE will have event.pageX = 20, event.pageY = 20

test example:

<script type="text/javascript"> $(document).ready(function(){

$('#examp').click(function(ev) {

alert(ev.pageX + ' ' + ev.pageY);

}

); }); </script> <div id="examp" style="position: absolute; left:10px; top:10px; width:10px; height:10px; background-color: red"></div>

[snover]

We have no plans to try to hack around IE6&7’s worthless zoom functionality. Please see ticket:4724#comment:2 for more information.