首页 > 代码库 > screenX clientX pageX的区别
screenX clientX pageX的区别
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()); }; 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; } </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>
screenX clientX pageX的区别