【浏览器】event.pageX/Y页面坐标(CSS像素) event.clientX/Y视口Viewport坐标(CSS像素) event.screenX/Y屏幕坐标(屏幕像素)

最新推荐文章于 2023-09-06 10:14:53 发布
最新推荐文章于 2023-09-06 10:14:53 发布
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tuhuolong/article/details/19577205
本文详细解释了网页坐标系中的pageX/Y、clientX/Y与screenX/Y的含义及用法，重点阐述了在不同场景下选择使用哪种坐标系的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
  2. clientX/Y gives the coordinates relative to the viewport in CSS pixels.
  3. screenX/Y gives the coordinates relative to the screen in device pixels.

  • pageX/Y提供了相对于<html>元素的以CSS像素度量的坐标。

desktop_pageXY

  • clientX/Y提供了相对于viewport的以CSS像素度量的坐标。

desktop_clientXY

  • screenX/Y提供了相对于屏幕的以设备像素进行度量的坐标。

desktop_screenXY

90%的时间你将会使用pageX/Y；通常情况下你想知道的是相对于文档的事件坐标。其他的10%时间你将会使用clientX/Y。你永远不需要知道事件相对于屏幕的坐标。

自学js第十五天:event坐标偏移量位置和window对象
weixin_47592060的博客
05-07 1732
一.Event对象集合中的鼠标按下或者点击时的相对位置:!=元素的自身位置 1.鼠标event对象给我们展示了 client / offset / page / screen系列的X Y坐标 可以用于在不同需求下获取用户鼠标的相对位置.(相对于各种参考物体的位置) 2.首先先了解鼠标event其实是一个事件对象集合来的,里面包含各种各样的鼠标事件的信息.其中就有当前用户点击鼠标触发事件的相对位置坐标. 比如如下的pageX,和 pageY [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
CSS 坐标系
weixin_43663349的博客
06-15 1405
CSS 坐标系 概念：css3中网页不再是一个二维平面，而是一个三维空间，水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x，y，z轴，如下图所示。箭头方向为正向，反之为负向(注意y轴方向与常规笛卡尔坐标系相反) ...
Css实现坐标点位效果
用心创作每一篇文章
02-19 301
【代码】Css实现坐标点位效果。
html5像素坐标,HTML5 Canvas像素处理使用接口介绍
weixin_29011667的博客
06-01 183
内容概要：本文通过简单的代码实例，以及略猥琐的图片demo，展示了canvas在图像像素数据操作方面的常用接口。至于如何利用这几个接口实现更复杂的效果，则会在后续章节里继续讲述。一、canvas图片填充； 2、设置/获取canvas图片数据； 3、创建canvas图片数据；4、关于imageData.data的一点补充； 5、写在后面一、canvas图片填充复制代码代码如下:/*** @descr...
Event常见属性 css学习
chengyan3170的博客
09-29 394
转载于:https://my.oschina.net/AdamHoly/blog/1545212
事件对象中clientX/Y 、pageX/Y、 screenX/Y、offsetX/Y的区别
fortune丶的blog
08-14 720
事件对象它是系统传给我们的一个对象,触发DOM上的某个事件时，会产生一个事件对象event，事件对象里面包括很多方法和属性，鼠标和键盘等等事件触发的内容都不一样 事件对象有兼容性 那么怎么处理兼容 兼容方法 ie中event事件对象是全局的所以加了window <button> 点击 <button> <script> var btn =...
window.event.clientX
03-14
在 JavaScript 事件处理中，`window.event.clientX` 用于获取**鼠标事件发生时指针相对于浏览器视口（Viewport）的水平坐标**。以下是详细解释和注意事项： --- ### 一、核心定义 - **`window.event`**: 一个...
我的浏览器窗口使用self.浏览器窗口.setFixedSize(1024, 575) 固定了浏览器尺寸大小，但是我使用QTimer.singleShot(2000,partial(self.模拟点击, 1024, 575))来可视化点击，发现点击的位置是（822,462）左右，我又尝试点击坐标起点（0,0）是正常的。即我传输进来的是浏览器视口坐标尺寸的坐标，但是js的坐标不一致，能否读取JS读取浏览器大小，再将坐标由(1024, 575) 固定了浏览器尺寸大小体系转化为JS的准确坐标，再进行点击和拖动等操作
最新发布
07-05
我们正在处理如何将浏览器视口坐标转换为在固定尺寸浏览器窗口中可用的JavaScript坐标，以便执行精确的点击和拖动操作。 根据引用[4]：触摸点有clientX和clientY，它们是相对于浏览器视口的坐标。 另外，引用[1]...
js实现touch移动触屏滑动事件
12-04
`event`对象中的`touch`对象包含了每个触摸点的具体信息，如`clientX/Y`（相对于浏览器窗口的位置）、`pageX/Y`（相对于整个页面的位置）、`screenX/Y`（相对于屏幕的位置）以及`identifier`（触摸的唯一标识）和`...
js事件详解-0-1-2级模型.pdf
09-27
- clientX和clientY提供了鼠标相对于视口（viewport）的位置 - screenX和screenY提供了鼠标相对于屏幕的位置 - offsetX和offsetY提供了鼠标相对于触发事件的目标元素的位置 - pageX和pageY提供了鼠标相对于整个...
计算机图形学06一一像素坐标和二维坐标的区别
XX的博客
03-14 4816
像素编制和对象的几何要素 当对象经扫描转换进帧缓存后，输入描述变换为对应有限屏幕区域的像素坐标，且显示的光栅图像可能并不严格符合相关的尺寸。如果要保证 世界坐标中对象的几何描述，我们可以在输入的数学点到有限的像素区域 映射中进行补偿。 如果将线段端点(20,10)和(30,18) 解析为精确的网格交点位置(网格交点:也就是那种坐标点 不是像素坐标那种一个格子一
[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect
qq_14993591的博客
09-06 529
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。
利用pageX、pageY动态的改变div的位置
qq_36354609的博客
09-07 1771
1.需求是：当鼠标动态的变化时，即鼠标在不同的DOM上触发事件，div的位置也会不断的发生改变。 2.效果图 3.代码如下： DOCTYPE html> html lang="en"> head> title>js控制div位置动态变化title> meta charset="UTF-8"> meta name="viewport" content="wid
关于浏览器和屏幕的坐标大全
weixin_34199405的博客
06-08 251
<body onclick="Text()"> <script type="text/javascript">var strInfo="";function Text(){strInfo+=window.event.x; //设置或获取鼠标指针位置相对于父文档的 x 像素坐标strInfo+="\n"+window.event.y;//设置或获取鼠标指针位置相对...
用Selenium爬取网页简单操作
BullMilk的博客
05-23 5381
一、工具的安装 首先，我们要先安装selenium库。可以通过指令pip install selenium进行安装。 安装完selenium后，还需要安装浏览器驱动程序。这里以chrome为例。安装步骤如下： 查看浏览器的版本号。找到菜单,在菜单中打开"帮助">"关于Google Chrome命令。里面就有版本号。 下载ChromeDriver。官方下载地址：https://chromedriver.storage.googleapis.com/index.html找到对应的版本号文件夹，打开
Unity中屏幕坐标、视口坐标和世界坐标、局部坐标与其之间的相互转换
TAOTAO
05-18 9490
全局坐标系（世界坐标系） 在Unity中创建的物体都是以全局坐标系中的坐标原点（0,0,0），来确定各自的位置的 Unity中，如果一个游戏物体没有父物体，则 Inspector中transform 显示的为全局坐标 Unity中，可以用 transform.position 取得一个物体的世界坐标 局部坐标系（物体坐标系、模型坐标系） 每个物体都有自身独立的物体坐标系；当物体移动...
clientX,pageX,screenX，offsetLeft，scrollTop
wjping11360的专栏
05-19 568
这个东西，以为理解了，今天彻底弄弄。 clientX 观点：鼠标相对于WINDOWS的坐标。 这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height 证明：点击获得clientX,clientY的大小，设置为图片定位的位置。 如果上面观点不成立，也就是这个坐标不是浏览器范围内的，例如是相对DOCUMENT的，那
python 读取鼠标点击坐标
weixin_31422237的博客
03-13 7440
import pythoncom, pyHook def onMouseEvent(event):      print "Position:", event.Position      return True def main(): hm = pyHook.HookManager() hm.HookKeyboard() hm.MouseAllButtonsDown = onMous
clientX,pageX,x,screenX,offsetX等的区别
ssisse的博客
06-01 2676
先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛
event.originalEvent.touches和event.pageX不存在怎么获得
07-15
首先，你可以尝试使用 `event.clientX` 和 `event.clientY` 属性来获取鼠标事件的页面坐标。这两个属性表示鼠标相对于浏览器窗口可视区域的坐标，而不是相对于整个页面的坐标。 ```javascript $("#flipbook").on(...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值