screenX / Y，clientX / Y和pageX /
2017-08-15 本文已影响55人
icessun
图|网络
offsetX，offsetY
IE浏览器特有的事件属性
鼠标点击的位置相当于事件源元素的位置坐标，以元素盒子模型的内容区域的左上角为参考点
clientX，clientY
设置或获取鼠标指针位置相对于
浏览器视口（内容区域的左上角）的坐标，与浏览器是否有滚动条无关
相对于页面的可见部分的左上角，通过浏览器窗口“看到”。
相对于viewportCSS像素的坐标。
screenX，screenY
设置或获取获取鼠标指针位置相对于
物理屏幕的左上角的坐标，当改变屏幕的分辨率的时候，坐标会随之改变
相对于screen设备像素的坐标。
- 对于这个属性
probably never need
pageX，pageY
相对于浏览器中完
全呈现的内容区域的左上角，此参考点位于左上方的网址栏和后退按钮下方。如果在页面中嵌入可嵌入的可滚动页面，并且用户移动滚动条，则可以实际改变位置。
坐标相对于整个渲染页面的左上角（包括滚动隐藏的部分）
相对于<html>CSS像素中元素的坐标。
- pageX与clientX的区别
pageY和clientY的差异，图来自网络
也就是说，当浏览器没有滚动条的时候，pageX和clientX是一样的
document.addEventListener('click', function(e) {
console.log(
'page: ' + e.pageX + ',' + e.pageY,
'client: ' + e.clientX + ',' + e.clientY,
'screen: ' + e.screenX + ',' + e.screenY)
}, false);
