js 鼠标Event对象获取页面偏移量js 鼠标Event对象集合 e.pageX,e.pageY 相对于整个doc

js 鼠标Event对象集合

document.addEventListener('click', function(event) {
    console.log('clientX:', event.clientX, 'clientY:', event.clientY);
    console.log('offsetX:', event.offsetX, 'offsetY:', event.offsetY);
    console.log('pageX:', event.pageX, 'pageY:', event.pageY);
    console.log('screenX:', event.screenX, 'screenY:', event.screenY);
});

e.pageX,e.pageY

相对于整个document文档的位置，文档的左上角为(0,0)，向右为正，向下为正,考虑了页面滚动,如果页面向下或向右滚动，pageX和pageY的值将增加

e.clientX,e.clientY

相对于浏览器视口(可视区域)的位置，不随页面滚动而改变

e.offsetX e.offsetY

返回触发点相对被触发dom content的左上角距离，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框上会返回负值【不管哪种盒模型，都是基于content左上角为基准点(不包含border)(包含padding)】

e.screenX e.screenY

相对于屏幕的坐标，浏览器上面的工具栏（包含上方工具栏）,不随页面滚动而改变

getBoundingClientRect()

返回一个DOMRect对象，其中包含了元素的left、top、right、bottom、x、y、width和height属性，这些属性提供了元素的精确位置和尺寸信息

标准盒子模型下：元素的尺寸等于width（或者height】 + padding + border的总和。如果设置了box-sizing: border-box属性，则元素的的尺寸等于 width/height

js 鼠标Event对象 获取页面偏移量