javascript 跨浏览器鼠标位置

理解不同浏览器之间的鼠标位置事件和属性的不同之处

1 clientX clientY

鼠标的位置是相对于浏览器可视窗口

2 screenX screenY

鼠标的位置是相对于屏幕

3 offsetX offsetY

鼠标的位置相对于目标元素

4 pageX pageY

鼠标的位置相对于html的document元素

5 x y

等效于clientX clientY 一些浏览器不支持该属性，可以用 clientX clientY 替换

6 layerX layerY

非标准api 鼠标的位置相对于最近的父类元素

7 计算pageX pageY

document.body.onclick = function(e) { e = e || window.event; e = jQuery.event.fix(e); console.log([e.pageX, e.pageY]); };

document.body.onclick = function(e) { e = e || window.event; var pageX = e.pageX; var pageY = e.pageY; if (pageX === undefined) { pageX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; pageY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } console.log([pageX, pageY]); };

 8 计算offsetX offsetY

getBoundingClientRect写法

document.body.onclick = function(e) { e = e || window.event; var target = e.target || e.srcElement, rect = target.getBoundingClientRect(), offsetX = e.clientX - rect.left, offsetY = e.clientY - rect.top; console.log([offsetX, offsetY]); };

兼容w3c规范的写法：
document.body.onclick = function(e) { e = e || window.event; var target = e.target || e.srcElement, style = target.currentStyle || window.getComputedStyle(target, null), borderLeftWidth = parseInt(style['borderLeftWidth'], 10), borderTopWidth = parseInt(style['borderTopWidth'], 10), rect = target.getBoundingClientRect(), offsetX = e.clientX - borderLeftWidth - rect.left, offsetY = e.clientY - borderTopWidth - rect.top; console.log([offsetX, offsetY]); };

出处：http://www.jacklmoore.com/notes/mouse-position/