鼠标位置,元素位置 ,页面宽高,滑动条滚动条距离(带兼容性)(个人笔记)
获取鼠标位置
相对于屏幕
function getMousePos(event) { var e = event || window.event; return {'x':e.screenX,'y':screenY}//相对于你的电脑屏幕的左上角 }
相对浏览器窗口
function getMousePos(event) { var e = event || window.event; return {'x':e.clientX,'y':clientY}//相对于浏览器工作区域左上角 }
相对文档
function getMousePos(event) { var e = event || window.event; var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = e.pageX || (e.clientX + scrollX); var y = e.pageY || (e.clientY + scrollY); //alert('x: ' + x + '\ny: ' + y); return { 'x': x, 'y': y }; }
//page和client属性的区别是:不考虑滚动条滚动的话,是一样的,如果上下滚动的话,pageY表示相对于页面的左上角(随着滚动会隐藏),
clientY表示相对于浏览器工作区域的左上角,滚动的情况下,pageY会改变,但是clientY不会变,如果左右滑动的话,也是一样的 clientX和pageX的区别 (前提:点击同一个地方)
页面宽高
(未完待续)