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

最新推荐文章于 2025-01-11 01:00:00 发布
原创 最新推荐文章于 2025-01-11 01:00:00 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解释了网页坐标系中的pageX/Y、clientX/Y与screenX/Y的含义及用法，重点阐述了在不同场景下选择使用哪种坐标系的重要性。
  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。你永远不需要知道事件相对于屏幕的坐标。

事件侦听和删除事件——event对象——按钮精灵——默认事件——取消冒泡事件——事件委托——默认触发——onload 图片预加载四个迭代版本
阿牛哥的博客
07-22 1024
事件侦听和删除事件——event对象——按钮精灵——默认事件——取消冒泡事件——事件委托——默认触发——onload 图片预加载四个迭代版本
像素坐标转换为世界坐标
qq_20179331的博客
04-26 2577
像素坐标转换为世界坐标。
CSS 坐标系
weixin_43663349的博客
06-15 1454
CSS 坐标系 概念：css3中网页不再是一个二维平面，而是一个三维空间，水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x，y，z轴，如下图所示。箭头方向为正向，反之为负向(注意y轴方向与常规笛卡尔坐标系相反) ...
Css实现坐标点位效果
用心创作每一篇文章
02-19 317
【代码】Css实现坐标点位效果。
html5像素坐标,HTML5 Canvas像素处理使用接口介绍
weixin_29011667的博客
06-01 194
内容概要：本文通过简单的代码实例，以及略猥琐的图片demo，展示了canvas在图像像素数据操作方面的常用接口。至于如何利用这几个接口实现更复杂的效果，则会在后续章节里继续讲述。一、canvas图片填充； 2、设置/获取canvas图片数据； 3、创建canvas图片数据；4、关于imageData.data的一点补充； 5、写在后面一、canvas图片填充复制代码代码如下:/*** @descr...
Event常见属性 css学习
chengyan3170的博客
09-29 410
转载于:https://my.oschina.net/AdamHoly/blog/1545212
事件对象中clientX/Y 、pageX/Y、 screenX/Y、offsetX/Y的区别
fortune丶的blog
08-14 737
事件对象它是系统传给我们的一个对象,触发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]...
事件clientX、getBoundingClientRect、position:fixed参考坐标
最新发布
11-21
在鼠标事件（如click、mousemove等）中，`clientX`和`clientY`属性提供了事件发生时鼠标指针相对于**浏览器视口（viewport）**的水平和垂直坐标。视口指的是浏览器窗口中实际显示网页内容的区域（不包括工具栏、地址...
使用JavaScript读取鼠标坐标的方法详解
这两个属性返回的是鼠标指针相对于浏览器视口（viewport）左上角的水平和垂直坐标，单位为像素。这里的“视口”指的是当前可见的网页区域，不包含滚动条以外的内容，也不受页面滚动的影响——也就是说，无论页面是否...
计算机图形学06一一像素坐标和二维坐标的区别
XX的博客
03-14 4838
像素编制和对象的几何要素 当对象经扫描转换进帧缓存后，输入描述变换为对应有限屏幕区域的像素坐标，且显示的光栅图像可能并不严格符合相关的尺寸。如果要保证 世界坐标中对象的几何描述，我们可以在输入的数学点到有限的像素区域 映射中进行补偿。 如果将线段端点(20,10)和(30,18) 解析为精确的网格交点位置(网格交点:也就是那种坐标点 不是像素坐标那种一个格子一
[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect
qq_14993591的博客
09-06 571
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。
Unity中Shader的屏幕坐标
楠溪泽岸的博客
09-07 2445
Unity中Shader的屏幕坐标。
c语言 获取 屏幕 像素坐标和颜色,在屏幕上获取颜色和绝对坐标，方便地选择像素...
weixin_36359075的博客
05-16 2899
问题我寻找一个工具，可以让我选择屏幕上的像素，并获得RGB颜色和绝对(x，y)的位置。ubuntu有没有什么类似的东西？答案1最合适的是，一个Windows的小工具ColorPix (通过wine )我经过长时间艰苦的搜索，Ubuntu/Linux的工具都不能满足你的条件，放大和坐标显示。我们需要一个很小的Windows工具--非常关键--它适用于默认的WINE安装，没有配置、安装、 DLL等等它...
屏幕坐标系和视口坐标系
热门推荐
aihiao的专栏
05-18 1万+
一.屏幕坐标系1.屏幕坐标系: 手机屏幕或者电脑屏幕的一个坐标系。2.屏幕坐标是以像素来定义的, 屏幕左下角为原点(0,0), 右上角为(Screen.width,Screen.height), width是屏幕的宽度, height是屏幕的高度, Z值是摄像机世界坐标取反,并且以相机的世界单位来衡量的。3.屏幕坐标和相机之间满足: Screen.width = Camera.main.pixel...
【CSS】一篇文章讲清楚screen、window和html元素的位置：top、left、width、height
weixin_45620943的博客
04-10 906
document.body.offsetLeft - 元素相对于其 offsetParent 的左边界的距离（包括外边距，不包括内边距）document.body.offsetTop - 元素相对于其 offsetParent 的上边界的距离（包括外边距，不包括内边距）document.body.clientHeight - 返回元素的内部高度（内容区域的高度，不包括边框、内边距或外边距）document.body.offsetHeight - 元素的高度，包括内边距和边框，但不包括外边距、滚动条和边框。
Unity的坐标系统及它们互相转换的方法
不在同一频道上的呆子的博客
12-06 4133
Unity的坐标系统及它们互相转换的方法
（十二）webgl中裁剪空间坐标和屏幕像素坐标初识
cuijiying的博客
01-11 1154
裁剪空间坐标和屏幕像素坐标之间的关系，为了更好地理解这一点，我们可以想象自己在一个平面上画一幅图，将其从一个三维世界的坐标系转换到一个二维的屏幕坐标系上。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值