鼠标点击事件对象的clientX、pageX、offsetX、screenX、x

已于 2022-11-16 13:28:59 修改
阅读量481 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript 前端
于 2022-11-16 10:57:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kwroi/article/details/127880839
版权

1. clientX、clientY

鼠标点击位置距离当前浏览器可视区域(可视区不包括工具栏和滚动条)的x，y坐标(窗口坐标)
滚动条滚动不会造成左上角参照点移动！

2. pageX、pageY

对于整个文档页面来说，包括了被卷去的body部分的长度
滚动条滚动会造成左上角参照点移动！

3. offsetX、offsetY

相对于触发事件的对象的x，y坐标

4. screenX、screenY

点击位置距离当前电脑屏幕的x，y坐标

5. x、y

和screenX、screenY一样

金毛好文明
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 858
现在需要对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`等。这些属性在不同的上下文下提供了...
鼠标事件对象
weixin_48340600的博客
09-22 516
鼠标事件对象 1、e.clientX和e.clientY 可视区的x,y坐标 不论页面滚动多长，返回的值都是相对可视区的坐标 2、e.pageX和e.pageY 鼠标相对文档的x,y坐标（常用） 随着页面滚动，返回的值是鼠标相对于页面头部或者最左侧的距离 3、e.screenX和e.screenY 相对于电脑屏幕的坐标 不论浏览器在哪个位置，返回的都是鼠标相对于电脑屏幕的坐标 例：跟随鼠标移动的天使 1、为document添加mousemove事件，并且获得鼠标相对文档的坐标 2...
JavaScript中的事件对象、事件对象的属性clientX、clientY、pageX、pageY等等
weixin_46449470的博客
04-26 1245
一、什么是事件对象 ​ 1）、 事件对象 就是保存着事件相关信息的对象。当事件发生时，会自动产生事件对象（不需要new），事件对象中包含着：事件源（发生事件的dom元素），点击是鼠标的哪个键，鼠标的当前位置（事件发生的位置）等等信息。 2）、事件源： ​ 发生事件的DOM元素（按钮，文本框，div，下拉框）。在事件处理函数里可以用this表示。 3）、事件对象的获取 ​ ...
DOM(三)：鼠标、键盘事件对象
weixin_53912712的博客
01-06 734
DOM（三）：鼠标事件对象、键盘事件对象
事件的offsetX属性
刘利新西安
06-13 725
Sets or retrieves the x-coordinate of the mouse pointer relative to the top-left corner of the offsetParent element of the element that fires the event. Use the srcElement property to get the element
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
`clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
javascript 事件对象 坐标事件说明
10-29
JavaScript 事件对象是处理用户交互时不可或缺的一部分，它们提供了有关事件发生时的各种信息，包括坐标信息。在不同的浏览器中，事件对象的坐标属性略有不同，这可能会导致在跨浏览器开发时遇到兼容性问题。下面...
鼠标事件中clientX、offsetX、screenX、pageX、x的区别
qq_45689637的博客
10-24 474
鼠标事件中clientX、offsetX、screenX、pageX、x的区别: 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标(所在的窗口) 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY一样 如图： ...
clientWidth，offsetWidth，clientTop，offsetTop总结，以及鼠标点击事件的clientX，offsetX，pageX，screenX总结
weixin_44476861的博客
12-05 350
前段日子，公司需要一个音频播放器组件，就自己实现了一个，其中进度条的点击，拖拽，会涉及到标题中的几个距离，闲下来的时候做实验总结了，以后就更加通透了。（内心OS：勤快一点总是好的） 先介绍结论，后面介绍实验过程，后面可以根据实验结果加深理解： clientWidth和clientHeight clientWidth是只包括content和padding的元素的宽度， clientHeight是只包括content和padding的元素的高度 offsetWidth和offsetHeight offsetW
秒懂鼠标事件clientX、offsetX、screenX、pageX、x的区别！
hj0556的博客
06-04 2060
onclick 鼠标点击事件 onmousedown 鼠标按下事件 onmouseup 鼠标松开事件 onmousemove 鼠标移动事件 onmouseover 鼠标经过事件 onmouseout 鼠标划出事件 由鼠标事件（MouseEvent）可以发现： 其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。 划重点！！ 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整..
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...
鼠标事件以及clientX、offsetX、screenX、pageX、x的区别
qq_40930251的博客
03-26 214
鼠标事件 鼠标事件有下面这几种： 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ console.log(e) } 3. onmouseup 鼠标松开事件 box.onmouseup = funct...
鼠标对象坐标offsetX和pageX，screenX和 cilentX 的区别
m0_63898223的博客
05-20 354
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 2000px; width: 2000px; background-color: darkmagen...
screenX clientX pageX的区别
weixin_34224941的博客
04-14 138
screenX clientX pageX概念 screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 如图(红点就是鼠标当前位置) ...
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
最新发布
weixin_63383437的博客
11-17 1961
offsetX
图解鼠标事件的 ScreenX ，LayerX，clientX，PageX，offsetX，X
fang_my的博客
02-27 1574
这篇文章是由我随手做的笔记改编而来，笔记内容比较粗糙，转化为文章后个人感觉又重新复习了一遍，加深了很大的印象。如果该文章能帮助到一些人，也是一件幸事。可能我以后也会经常来翻阅自己的这篇文章～这几个属性确实容易搞混🤔。
鼠标位置的获取clientX、pageX、offsetX，screenX的使用
qq_36354609的博客
09-07 1126
DOCTYPE html> html lang="en"> head> title>鼠标位置的获取title> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1"> script src="js/jquery.js">/script> style
offsetX,clientX,pageX,offsetLeft
05-13
- offsetX：事件对象相对于目标节点的 x 坐标偏移量。 - clientX：事件对象相对于浏览器窗口的 x 坐标。 - pageX：事件对象相对于文档的 x 坐标。 - offsetLeft：节点的左侧边框到其 offsetParent 元素的左侧内边框...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值