clientX与clientY
首先来了解什么是浏览器窗口可视区。
红色小框框里的就是浏览器窗口可视区。浏览器窗口可视区可变化：
看浏览器窗口可视区因为我的开发者工具而变小了！
然后是坐标轴：
看懂了没有！以浏览器窗口可视区的坐上顶点为原点向右，向下分别构成了X轴正方向和Y轴正方向！
简单的代码：
<body>
<script>
document.addEventListener('click',(e)=>{
console.log(e.clientX,e.clientY);
})
</script>
</body>
pageX与PageY
相对于文档页面的坐标！嗯嗯，举个栗子~
代码：
<body style="height: 3000px;">
<script>
document.addEventListener('click',(e)=>{
console.log(e.pageX,e.pageY);
})
</script>
</body>
效果：
嘿嘿，刚会的gif制作
screenX与screenY
看个小小的gif：
了解了没有！！屏幕距离！屏幕距离！
扫一扫
834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
