鼠标对象坐标offsetX和pageX，screenX和 cilentX 的区别

最新推荐文章于 2023-11-17 01:55:00 发布
最新推荐文章于 2023-11-17 01:55:00 发布
阅读量365 收藏
点赞数
分类专栏： 参考 笔记 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63898223/article/details/124889759
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 2000px;
            width: 2000px;
            background-color: darkmagenta;
        }
        section{
            height: 100px;
            width: 100px;
            margin: 100px auto;
            background-color: #bfa;
        }
    </style>
</head>
<body>
<div>
    <section></section>
</div>
<script>
    var div=document.querySelector('div')
    var sec=document.querySelector('section')
    sec.addEventListener('click',function (e) {
        console.log(e.offsetX)//返回的坐标是相对于事件源盒子的距离
        console.log(e.offsetY)//返回的坐标是相对于事件源盒子的距离
        console.log(e.screenX)//相对于屏幕的左上角
        console.log(e.screenY)//相对于屏幕的左上角
        console.log(e.pageX)// 鼠标在整个页面的位置
        console.log(e.pageY)//鼠标在整个页面的位置
        console.log(e.clientX)//鼠标相对于视口的位置
        console.log(e.clientY)//鼠标相对于视口的位置


    })
</script>

</body>
</html>

前端小菜鸭
关注
专栏目录
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 858
QQ群招募中：646258285（招募中，没几个人说话）， 需要交流的朋友可以直接加我微信( DntBeliv )或QQ( 1121864253 ) 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY
如何获取鼠标位置，以及pageX/Y、screenX/Y、clientX/Y和offsetX/Y 的区别
小小前端
04-17 423
如何获取鼠标位置 当我们注册事件时，系统会自动给我们创建一个 事件对象 以参数的形式传递到函数内 我们可以先打印一下 事件对象event ,看看里面到底有什么 document.onclick = function(event){ console.log(event) } 那该用哪个，它们又有什么区别呢？ 属性 描述 offsetX / offsetY 相对于父盒子的...
pageX、clientX、screenX、offsetX、layerX、x
asd65285的专栏
10-16 460
chrome： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标
pagex，screenx，clientx的区别
kateLi的专栏
07-09 1355
screenX：参照物为电脑的屏幕左上角，距离电脑屏幕的水平距离 clientX：参照物是内容区域左上角，距离内容区域左上角的水平距离，会随着滚动条的移动而移动 pageX：参照物也是内容区域的左上角，距离内容区域左上角的水平距离，但是不会随着滚动条的移动而移动
clientX, pageX,screenX, offsetX对比
bangbDIV的博客
11-16 338
1. clientX、clientY  点击位置距离当前浏览器窗口可视区域的x，y坐标 2.pageX、pageY  类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。pageX = clientX + 横向滚动条的距离 3.screenX、screenY  相对于显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性...
pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用 和 区别
IT技术宅-北方的刀郎
01-25 2173
pageX，pageY，screenX，screenY，clientX，和clientY返回一个数，其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置，参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。 写了俩文件，放一个文件夹内测试看完就能明白， layerX_pageX_clientX_screenX_window_document_body.html： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 885
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
鼠标事件中event对象的clientx和pagex的区别与联系
suxue1994的博客
03-01 1329
     event.clientX、event.clientY 　　鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 　　event.pageX、event.pageY 　　类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性...
pageX,clientX,screenX,offsetX区别
weixin_43368552的博客
08-22 297
注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px。当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。特别说明：IE不支持！
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 1788
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
鼠标点击事件对象的clientX、pageX、offsetX、screenX、x
kwroi的博客
11-16 494
鼠标点击事件对象的client、page、offset、screen、x相关属性区别
鼠标事件以及clientX、offsetX、screenX、pageX、x的区别
weixin_40347345的博客
04-02 171
鼠标事件 鼠标事件有下面这几种： onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 1 2 3 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ console.log(e) } 1 2 3 3. onmouseup 鼠标松开事件 box.onmouseup = func...
js的clientX、pageX、screenX等方法来获取鼠标坐标详解
weixin_41652495的博客
09-26 1724
记录js的clientX、pageX、screenX
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
最新发布
weixin_63383437的博客
11-17 2312
offsetX
dom元素、鼠标元素位置clientX、clientY、offsetX、offsetY、screenX、screenY、pageX、pageY
八佾舞于庭
11-15 6453
event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 (可见区域) event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 （可见区域） event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 （触发事件的元素,ie,chrom...
HTML 页面中的位置：clientX、screenX、offsetX、pageX
热门推荐
抱朴守拙
03-03 1万+
事件中鼠标的 (x,y) 位置 clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变； clientY 鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变； pageX 鼠标相对于浏览器左上角x轴的坐标； 随滚动条滚动而改变； pageY 鼠标相对于浏览器左上角y轴的坐标； 随滚动条滚动而改变； screenX 鼠标相对于显示器屏幕左上角x轴的坐标； scre...
pageX offsetX screenX
07-27
- pageX：鼠标事件相对于整个文档页面的水平坐标。 - offsetX：鼠标事件相对于事件目标元素的水平坐标。 - screenX：鼠标事件相对于用户屏幕的水平坐标。 这些属性可以在处理鼠标事件时使用，以获取鼠标位置的相关...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值