鼠标位置,元素位置 ,页面宽高,滑动条滚动条距离(带兼容性)(个人笔记)

获取鼠标位置

  相对于屏幕

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 + '
y: ' + y);
            return { 'x': x, 'y': y };
}
//page和client属性的区别是:不考虑滚动条滚动的话,是一样的,如果上下滚动的话,pageY表示相对于页面的左上角(随着滚动会隐藏),
clientY表示相对于浏览器工作区域的左上角,滚动的情况下,pageY会改变,但是clientY不会变,如果左右滑动的话,也是一样的 clientX和pageX的区别 (前提:点击同一个地方)

页面宽高

 (未完待续)   

原文地址:https://www.cnblogs.com/web-chuan/p/9113036.html