获取点击的坐标有三种情况

获取在可视区域的坐标获取在文档页面的坐标获取在电脑屏幕的坐标

一：获取在可视区域的坐标

e.clientX :获取距离页面左边的距离

e.clientY ：距离页面可视区域上边框的距离

获取在可视区的坐标，可视区就是我们屏幕可以看得到的区域例如在下方的截图中，红框圈住的区域就是可视区域，不管页面有多长，展示出来的可以看得见的这一部分就叫做可视区域

document.addEventListener('click',function(e){console.log(e.clientX);console.log(e.clientY);})

这就可以得到点击后可视区域的位置坐标

二：获取在文档页面的坐标

e.pageX ：获取距离页面左边的距离

e.pageY ：获取距离文档页面顶部的距离

文档页面是指如果你的页面很长，在你往下滚动滑轮后，到顶部的距离不再是到可视区域的顶部的距离了，而是到文档顶部的距离，图解如下

document.addEventListener('click',function(e){console.log(e.pageX);console.log(e.pageY);})

三：获取在电脑屏幕的坐标

在电脑屏幕的坐标是指如果页面小窗口化了，获取的不再是到页面边缘的坐标，而是屏幕边缘的坐标

document.addEventListener('click',function(e){console.log(e.screenX);console.log(e.screenY);})