鼠标事件中clientX、offsetX、screenX、pageX、x的区别

最新推荐文章于 2023-07-05 15:40:48 发布
最新推荐文章于 2023-07-05 15:40:48 发布
阅读量718 收藏
点赞数
分类专栏： javaScript 学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Veranew/article/details/110874579
版权

clientX、clientY

long 型可选，默认为 0，设置鼠标事件时相对于客户端窗口的水平坐标位置；该操作并不会改变真实鼠标的位置。

pageX、pageY

pageX 是一个由MouseEvent接口返回的相对于整个文档的x（水平）坐标以像素为单位的只读属性。

这个属性将基于文档的边缘，考虑任何页面的水平方向上的滚动。举个例子，如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。

对于整个页面来说，包括了被卷去的body部分的长度

screenX、screenY

long 型可选，默认为 0，设置鼠标事件发生时相对于用户屏幕的水平、垂直坐标位置；该操作并不会改变真实鼠标的位置。

offsetX、offsetY

MouseEvent 接口的只读属性 offsetX 规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量。

相对于带有定位的父盒子的x，y坐标

x、y

和screenX、screenY一样

ctrlKey

Boolean 型可选，默认为false，标明是否同时按下 ctrl 键。

shiftKey

Boolean 型可选，默认为false，标明是否同时按下 shift 键。

altKey

Boolean 型可选，默认为 false，标明是否同时按下 alt 键。

metaKey

Boolean 型可选，默认为false，标明是否同时按下 meta 键。

button

short 型可选，默认为 0，描述了当事件发生时，哪个按键被按下或释放：

值含义
0主按键被按下（通常为左键）或未初始化
1辅助按键被按下 (通常为中键)
2次按键被按下 (通常为右键)
Veranew
关注
专栏目录
clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 911
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
鼠标事件之clientX(Y)、offsetX(Y)、screenX(Y)、pageX(Y)、x(y)的区别与使用详解
Janewenhui的博客
12-18 592
文章目录一、鼠标事件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
clientX offsetX pageX screenX
weixin_33898876的博客
04-28 152
2019独角兽企业重金招聘Python工程师标准>>> ...
clientX,pageX,x,screenX,offsetX等的区别
ssisse的博客
06-01 2621
先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛
offsetX，clientX，pageX
DongFuPanda的博客
02-10 321
鼠标的位置 offsetX offsetY 相当于事件源元素的位置坐标。IE 只支持 offsetX 和 offsetY。网上有文章说 IE 和 chrome 有区别，但是我给父元素加了 border、padding 后发现数值一致，并无区别，所以应该可以放心使用。 clientX clientY 相对于浏览器视口的坐标。 pageX pageY 相对于 document 左上角的坐标。 ...
event对象的clientX,offsetX,screenX,pageX
dianzhani178819的博客
08-03 175
chrome： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 ...
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,x,y等的区别[转]
peswe的专栏
03-25 681
clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0； offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0； screenX, screenY是相对于用户显示器的位置 x,y是鼠标相对于当前浏览器的位置 Measure...
clientX、pageX、offsetX、screenX、offsetWidth、clientWidth等
平平无奇小码农的博客
01-27 1264
1、clientX 、clientY document.onclick = function (event){ var clientX = event.clientX; var clientY = event.clientY; } 这里的clientX和clientY是鼠标点击事件中点击的那个点在浏览器中的坐标
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2767
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
Js中event对象的x,clientX,offsetX区别
yinyiniao(Leo)'s blog
01-16 9076
 Js中event对象的x,clientX,offsetX三者主要区别含义如下：x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。  clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。  offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。  screenX:相对于用户屏幕。
js drag事件的最后一次clientX为0
w_____w_____的博客
10-10 799
如图所示，drag事件的最后一次输出（松开鼠标）会跳变为0； //使用dragover阻止 document.addEventListener("dragover", function(event) { // prevent default to allow drop event.preventDefault(); }, false);
pageX、clientX、screenX、offsetX、layerX、x
asd65285的专栏
10-16 481
chrome： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff： e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标
移动端mousedown不生效 类型“TouchEvent”上不存在属性“clientX”
wnk1997的博客
01-14 1026
MouseEvent里面的clientX对应TouchEvent里面的changedTouches[0].clientX，所以做个判断，适配下移动端和电脑端就行。然后两个方法里面的对象也不一样，mouse的是MouseEvent，touch的是TouchEvent。mousedown相当于touchstart。移动端只有如下四个操作。
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY
热门推荐
蒲公英芽的博客
01-06 2万+
MouseEvent的类别有以下： mousedown 鼠标按下 mouseup 鼠标释放 click 左键单击 dblclick 左键双击 mousemove 鼠标移动 mouseover 鼠标经过 mouseout 鼠标滑出 mouseenter 鼠标进入 mouseleave 鼠标离开 contextmenu 右键菜单 注意： 执行顺序：mousedown —&g...
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
最新发布
qq_43631129的博客
07-05 7632
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 4187
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
offsetX,clientX,pageX,offsetLeft
05-13
假设有一个 div 元素，它的 offsetLeft 为 100px，当鼠标在它内部发生了 click 事件时，offsetX 就表示鼠标相对于这个 div 左侧边框的像素距离，clientX 则表示鼠标相对于浏览器窗口左侧的像素距离，pageX 则表示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值