js鼠标事件clientX/Y、offsetX/Y、screenX/Y、pageX/Y、x/y的区别

最新推荐文章于 2023-04-04 18:13:54 发布
最新推荐文章于 2023-04-04 18:13:54 发布
阅读量292 收藏 1
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46376163/article/details/105397671
版权

在这里插入图片描述
X:以浏览器可视窗口为参考，相对窗口左上角的横坐标像素
Y:以浏览器可视窗口为参考，相对窗口左上角的纵坐标像素
clientX：以浏览器可视窗口为参考，相对窗口左上角的横坐标像素
clientY：以浏览器可视窗口为参考，相对窗口左上角的纵坐标像素
————————————————————————————
offsetX：以被点击的目标元素为参考，相对目标元素左上角横坐标像素
offsetY：以被点击的目标元素为参考，相对目标元素左上角纵坐标像素
————————————————————————————
layerX：默认情况下以页面整体为参考，相对页面左上角横坐标像素
点击的目标元素设置position定位，相对目标元素左上角横坐标像素
layerY：以页面整体为参考，相对页面左上角纵坐标像素
点击的目标元素设置position定位，相对目标元素左上角纵坐标像素
pageX：以页面整体为参考，相对页面左上角横坐标像素
pageY：以页面整体为参考，相对页面左上角纵坐标像素
————————————————————————————
screenX：以显示屏幕为参考，相对显示屏左上角横坐标像素
screenY：以显示屏幕为参考，相对显示屏左上角纵坐标像素

Dreaming-Time
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何获取鼠标位置，以及pageX/Y、screenX/Y、clientX/Y和offsetX/Y 的区别
小小前端
04-17 409
如何获取鼠标位置 当我们注册事件时，系统会自动给我们创建一个 事件对象 以参数的形式传递到函数内 我们可以先打印一下 事件对象event ,看看里面到底有什么 document.onclick = function(event){ console.log(event) } 那该用哪个，它们又有什么区别呢？ 属性 描述 offsetX / offsetY 相对于父盒子的...
鼠标事件之clientX(Y)、offsetX(Y)、screenX(Y)、pageX(Y)、x(y)的区别与使用详解
Janewenhui的博客
12-18 544
文章目录一、鼠标事件1. onclick2. onmousedown3. onmouseup4. onmousemove5. onmouseover6. onmouseout二、坐标1、clientX、clientY2、pageX、pageY3、screenX、screenY4、offsetX、offsetY5、x、y 一、鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmous
js计算滚轮滚动到导航组件时吸顶
qq_41411324的博客
02-03 322
页面： 吸顶方法：
原生js—clientX、clientY、screenX、screenY、offsetX、offsetY、pageX、pageY、x、y
代码小宝宝的博客
02-24 1608
原生js—clientX、clientY、screenX、screenY、offsetX、offsetY、pageX、pageY、x、y clientX、clientY：相对于浏览器的可视区域（inner部分，也就是body的起始位置 ) 左上角（0,0）的坐标，会随滚动条的滚动而改变； screenX、screenY：相对于设备屏幕左上角（0,0）的坐标； offsetX、offs...
javascript 中 x offsetX clientX screenX pageX的区别
热门推荐
杨传龙的专栏
10-18 1万+
在javascript的事件对象中的关于事件鼠标位置的几个属性（x, pageX, offsetX, scrrenX clientX)及（y, pageY, offsetY, screenY, clientY), 其中offsetX, offsetY是指相对于触发事件元素的左上角的偏移。但在不同的浏览器中其值又有所不同。在chrome opera, safari中是指外边缘，即把该元素边框的宽度
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
麻瓜哇哇哇的博客
05-09 1507
简介 因为实际开发中，很少用到event对象的这几个值，每当写的时候又记不清，然后就要浪费时间去查找准确的资料，很是不爽，所以就做个记录~话不多说，直接上图（ps:图是网上找的，如果侵权，立马删除）： 针对offsetX, clientX, pageX, screenX，图上已经标的很明白了，就不做讲解了~ event.x event.x代表点击的点距离可视区左边框的距离，而它在不同浏览器处理结果是不一样的，首先看以下代码 <body> <div> 外
js event事件clientX clientY offsetX offsetY pageX pageY layerX layerY screenX screenY属性
persist_z的博客
02-24 678
在js的获取鼠标位置当中大概有clientX clientY offsetX offsetY pageX pageY layerX layerY screenX screenY这几种属性，下面是我个人对于这些属性的一些理解： 首先实例代码是这样的 *{ margin: 0; padding: 0; } .wrap{ width: 100px; heig...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
javascript offsetX与layerX区别
10-29
FF没有offsetX属性，有个layerX属性，只要将事件源的位置设置成相对定位(position:relative)或绝对定位(position:absolute)，两者结果就相等，表示事件源相对于父元素的X坐标。
【JavaScript源代码】JavaScript 鼠标事件(MouseEvent)案例讲解.docx
12-29
JavaScript 鼠标事件，即 MouseEvent，是JavaScript中处理与鼠标操作相关事件的关键部分。当用户使用鼠标执行特定操作，如点击、移动、滚动等，浏览器会生成一个MouseEvent对象，这个对象包含了关于鼠标事件的详细...
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
逆风优雅的博客
06-10 5197
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...
JS clientX、offsetX、pageX、screenX
zhumizhumi的博客
07-04 2309
因为要写拖拽、拉伸，所以去查了有关这方面的博客，然后发现每一篇博客说的都不一样。。。，我的这篇博客是按照我自己的理解来解释的，有错误的话，欢迎指正【我也不能肯定100%正确】 一：图形解释 二：书面解释【根据英文单词意思，也可以猜个八九不离十】 screen：屏幕 1.作用对象：鼠标点 2.坐标中心点：电脑屏幕左上角 3.screenX：鼠标点距离电脑屏幕左边的距离；screen...
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
Dream_6666的博客
04-04 535
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
js中根据x,y 坐标模拟点击事件
weixin_33941350的博客
03-07 5167
现在我有个窗口坐标X,Y. 如何利用JS点击该坐标?document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagName.toLowerCase(); document.getElementById("out").innerHTML = stag; }; var simulateCl...
PageX、clientX、screenX、offsetX、layerX的区别
qq_45044074的博客
03-08 7706
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有bode
chromedriver-mac-arm64_126.0.6465.0.zip
最新发布
07-31
chromedriver-mac-arm64_126.0.6465.0.zip
如何保存x和y坐标在div背景图的百分比
05-28
首先，你需要通过鼠标事件获取鼠标在div中的坐标，可以使用以下代码： ``` var mouseX = event.clientX - div.offsetLeft; var mouseY = event.clientY - div.offsetTop; ``` 其中，event.clientX和event.clientY...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值