鼠标位置，元素位置 ，页面宽高，滑动条滚动条距离（带兼容性）（个人笔记）...

获取鼠标位置

　　相对于屏幕

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的区别  （前提：点击同一个地方）

页面宽高

　（未完待续）　　　

 

转载于:https://www.cnblogs.com/web-chuan/p/9113036.html