获取鼠标点击位置的坐标

卡卡西最近怎么样

已于 2022-04-27 23:57:35 修改

阅读量8.6k

点赞数 14

分类专栏： JavaScript 零基础入门文章标签： javascript html5 前端开发语言

于 2022-03-03 17:29:00 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/123259097

版权

80 篇文章 43 订阅

订阅专栏

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

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

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

关注