js event事件clientX clientY offsetX offsetY pageX pageY layerX layerY screenX screenY属性

在js的获取鼠标位置当中大概有clientX clientY offsetX offsetY pageX pageY layerX layerY screenX screenY这几种属性，下面是我个人对于这些属性的一些理解：
首先实例代码是这样的

*{
margin: 0;
padding: 0;
}
.wrap{
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 100px 0  0 100px;
border: 1px solid black;
/* padding: 5px; */
}

const dom = document.getElementsByClassName('wrap')[0];
dom.onclick = function (e)
{
let client = `client: X = ${e.clientX} y = ${e.clientY}`;
console.log(client);

let offset = `offset: X = ${e.offsetX} y = ${e.offsetY}`;
console.log(offset);

let layer = `layer: X = ${e.layerX} y = ${e.layerY}`;
console.log(layer);

let page = `page: X = ${e.pageX} y = ${e.pageY}`;
console.log(page);

let screen = `screen: X = ${e.screenX} y = ${e.screenY}`;
console.log(screen);
}

<div class="wrap">

</div>

clientX clientY:当事件被触发时 获取鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变

offsetX offsetY：当事件被触发时鼠标指针获取鼠标指针距离事件源（div.wrap）的距离(包括padding但是不包括border以及margin，当然这是在不设置box-sizing：border-box这些属性的情况下)；

screenX screenY：事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标，也就是相对于我们的屏幕来说，就算浏览器没有最大化也是按照我们的显示屏窗口来计算的

pageX pageY layerX layerY：page layer这两个属性在火狐qq等浏览器上一般是没有什么差别的获取到的是鼠标触发点相对于触发事件源div.wrap元素左上角的距离(确切的说是到边框外边界的距离)， 包括中间所有元素的padding、margin、border及元素宽度值之和)，所以这里的layer = 100px + 1px+100px，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，但是中的注意的是在chrome中offset和layer并不是完全一样的offsetX: 是鼠标事件相对于目标元素的位置
layerX，Y：是鼠标相对于目标元素最近（不包括自己）的具有absolute/relative的定位元素的位置

这是在chrome浏览器当中因为没有设置定位所以相对于html文档

第一次写博客，希望不足之处希望各位前辈指出

• 点赞
• 收藏
• 分享
• 文章举报