screenX clientX pageX概念
打開的pop窗口隨着鼠標點擊的dom元素而定位展示的js代碼：
e是click事件，o是pop窗口的寬度或高度，
eventX = function (e, o) {
e = e || window.event;
o = o || 0;
x = e.pageX || e.clientX + document.body.scroolLeft;
return x + o > screen.availWidth ? screen.availWidth - o : x - o / 2 < 0 ? 0 : x - o / 2;
}
eventY = function (e, o) {
e = e || window.event;
o = o || 0;
alert('clientY = ' + e.clientY);
y = e.pageY || e.clientY + document.body.scrollTop;
return y + o > screen.availHeight ? screen.availHeight - o : y - o / 2 < 0 ? 0 : y - o / 2;
}
screenX:鼠標位置相對於用戶屏幕水平偏移量，而screenY也就是垂直方向的，此時的參照點也就是原點是屏幕的左上角。
clientX:跟screenX相比就是將參照點改成了瀏覽器內容區域的左上角，該參照點會隨之滾動條的移動而移動，也就是說，他計算left或top時直接忽略了滾動條的高和寬，它的參考點是瀏覽器可見區域的左上角，而不是頁面本身的body左上角原點，計算數值和滾動條是否滾動沒有關系，只是絕對的計算鼠標點距離瀏覽器內容區域的左上角的距離，忽略了滾動條的存在。
pageX：參照點是頁面本身的body原點，而不是瀏覽器內容區域左上角，它計算的值不會隨着滾動條而變動，它在計算時其實是以body左上角原點（即頁面本身的左上角，而不是瀏覽器可見區域的左上角）為參考點計算的，這個相當於已經把滾動條滾過的高或寬計算在內了，所以無論滾動條是否滾動，他都是一樣的距離值。
所以基本可以得出結論：
pageX > clientX, pageY > clientY
pageX = clientX + ScrollLeft(滾動條滾過的水平距離)
pageY = clientY + ScrollTop(滾動條滾過的垂直距離)
如圖(紅點就是鼠標當前位置)
參考代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> body { margin: 0; padding: 0; } .div { text-align: center; font-size: 24px; height: 300px; width: 1300px; line-height: 300px; color: yellow; } #d1 { background-color: red; } #d2 { background-color: green; } #d3 { background-color: blue; } #d4 { position: absolute; background-color: yellow; height: 150px; width: 120px; top: 0; } </style> <script type="text/javascript">$(function () {
window.onscroll = function () {
$("#d4").css({ top: getScrollTop(), left: getScrollLeft() });
};document.onmousemove = function (e) {
if (e == null) {
e = window.event;
}
var html = "screenX:" + e.screenX + "<br/>";
html += "screenY:" + e.screenY + "<br/><br/>";
html += "clientX:" + e.clientX + "<br/>";
html += "clientY:" + e.clientY + "<br/><br/>";
if (e.pageX == null) {
html += "pageX:" + e.x + "<br/>";
html += "pageY:" + e.y + "<br/>";
} else {
html += "pageX:" + e.pageX + "<br/>";
html += "pageY:" + e.pageY + "<br/>";
}$("#d4").html(html);
};
});function getScrollTop() {
var top = (document.documentElement && document.documentElement.scrollTop) ||
document.body.scrollTop;
return top;
}function getScrollLeft() {
</script> </head> <body> <div id="d1" class="div">div1 height:300px width:1300px</div> <div id="d2" class="div">div2 height:300px width:1300px</div> <div id="d3" class="div">div3 height:300px width:1300px</div> <div id="d4"></div> </body> </html>
var left = (document.documentElement && document.documentElement.scrollLeft) ||
document.body.scrollLeft;
return left;
}