screenX,screenY
clientX,clientY
screen 相对于屏幕左上角的坐标,单位为像素。
client 相对于浏览器窗口左上角的坐标,单位为像素。
举例:
浏览器缩放或者放大时,screen 会发送变化,client 不会,当然除非你通过媒体查询或者其他方式更改了元素的宽高等等。
实践,监听body:
document.body.addEventListener('click',function(e){ console.log('client:',e.clientX); console.log("sceen:",e.screenX); } );
当前页面为100%情况下:
放大为110%,这里156 是因为个人鼠标点击有偏差,不用太在意。。
可以查看,client是没有变化的,比如你设置某个div left(当然是针对浏览器的绝对定位或者固定定位)为20px,那么不管放大缩小,clientX都是20px。