获取鼠标点击位置的坐标

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

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

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

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);
    })