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

最新推荐文章于 2023-12-06 21:34:01 发布
最新推荐文章于 2023-12-06 21:34:01 发布
阅读量1.3k 收藏
点赞数
分类专栏： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tuhuolong/article/details/19577205
版权
  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 1713
一.Event对象集合中的鼠标按下或者点击时的相对位置:!=元素的自身位置 1.鼠标event对象给我们展示了 client / offset / page / screen系列的X Y坐标 可以用于在不同需求下获取用户鼠标的相对位置.(相对于各种参考物体的位置) 2.首先先了解鼠标event其实是一个事件对象集合来的,里面包含各种各样的鼠标事件的信息.其中就有当前用户点击鼠标触发事件的相对位置坐标. 比如如下的pageX,和 pageY [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
（八）移动端前端开发-移动端事件
m0_56517198的博客
02-14 775
鼠标类：click、mouseover、mouseout、mouseleave、mouseenter、mouseup、mousedown…键盘类：keydown、keyup…其他类：blur、focus、change、load…移动端事件：点击事件\双击事件、滑动事件：上滑、下滑、左滑、右滑、长按事件、摇一摇、重力感应等。。在移动端上使用click事件，会出现300ms延时问题。判断用户操作是否为双击事件，在300ms以内再一次点击了屏幕，浏览器则判断为双击操作。没有点击则为单击操作。touch事件
CSS 坐标系
weixin_43663349的博客
06-15 1369
CSS 坐标系 概念：css3中网页不再是一个二维平面，而是一个三维空间，水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x，y，z轴，如下图所示。箭头方向为正向，反之为负向(注意y轴方向与常规笛卡尔坐标系相反) ...
Css实现坐标点位效果
用心创作每一篇文章
02-19 294
【代码】Css实现坐标点位效果。
html5像素坐标,HTML5 Canvas像素处理使用接口介绍
weixin_29011667的博客
06-01 172
内容概要：本文通过简单的代码实例，以及略猥琐的图片demo，展示了canvas在图像像素数据操作方面的常用接口。至于如何利用这几个接口实现更复杂的效果，则会在后续章节里继续讲述。一、canvas图片填充； 2、设置/获取canvas图片数据； 3、创建canvas图片数据；4、关于imageData.data的一点补充； 5、写在后面一、canvas图片填充复制代码代码如下:/*** @descr...
Event常见属性 css学习
chengyan3170的博客
09-29 382
转载于:https://my.oschina.net/AdamHoly/blog/1545212
事件对象中clientX/Y 、pageX/Y、 screenX/Y、offsetX/Y的区别
fortune丶的blog
08-14 711
事件对象它是系统传给我们的一个对象,触发DOM上的某个事件时，会产生一个事件对象event，事件对象里面包括很多方法和属性，鼠标和键盘等等事件触发的内容都不一样 事件对象有兼容性 那么怎么处理兼容 兼容方法 ie中event事件对象是全局的所以加了window <button> 点击 <button> <script> var btn =...
window.event.clientX
最新发布
03-14
在 JavaScript 事件处理中，`window.event.clientX` 用于获取**鼠标事件发生时指针相对于浏览器视口（Viewport）的水平坐标**。以下是详细解释和注意事项： --- ### 一、核心定义 - **`window.event`**: 一个...
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 4794
像素编制和对象的几何要素 当对象经扫描转换进帧缓存后，输入描述变换为对应有限屏幕区域的像素坐标，且显示的光栅图像可能并不严格符合相关的尺寸。如果要保证 世界坐标中对象的几何描述，我们可以在输入的数学点到有限的像素区域 映射中进行补偿。 如果将线段端点(20,10)和(30,18) 解析为精确的网格交点位置(网格交点:也就是那种坐标点 不是像素坐标那种一个格子一
[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect
qq_14993591的博客
09-06 489
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。
Unity的坐标系统及它们互相转换的方法
不在同一频道上的呆子的博客
12-06 3520
Unity的坐标系统及它们互相转换的方法
利用pageX、pageY动态的改变div的位置
qq_36354609的博客
09-07 1755
1.需求是：当鼠标动态的变化时，即鼠标在不同的DOM上触发事件，div的位置也会不断的发生改变。 2.效果图 3.代码如下： DOCTYPE html> html lang="en"> head> title>js控制div位置动态变化title> meta charset="UTF-8"> meta name="viewport" content="wid
学习笔记10屏幕坐标+光衰减
yinianbaifaI的博客
10-30 174
这里可以把变换到灯光空间下的坐标进行一个输出，然后我们移动灯光的位置他就有所变化，重点在于，我们把灯光中心放在物体上的时候，也就是x分量基本为0，他是黑色，而当我们把灯光的范围边界放在物体上的时候，他是白色。这个我们需要在参数列表中写上，然后UNITY_VPO_TYPE，这个是屏幕坐标的类型，其实就是一个float4，但是有时候是float2，因为这个是和平台有关系的，我们可以直接修改成float4，但是他在某些平台上可能是float2，所以官方给我们搞了一个宏来处理这两种情况。所以类型直接用他的宏即可。
关于浏览器和屏幕的坐标大全
weixin_34199405的博客
06-08 244
<body onclick="Text()"> <script type="text/javascript">var strInfo="";function Text(){strInfo+=window.event.x; //设置或获取鼠标指针位置相对于父文档的 x 像素坐标strInfo+="\n"+window.event.y;//设置或获取鼠标指针位置相对...
Unity中屏幕坐标、视口坐标和世界坐标、局部坐标与其之间的相互转换
TAOTAO
05-18 9418
全局坐标系（世界坐标系） 在Unity中创建的物体都是以全局坐标系中的坐标原点（0,0,0），来确定各自的位置的 Unity中，如果一个游戏物体没有父物体，则 Inspector中transform 显示的为全局坐标 Unity中，可以用 transform.position 取得一个物体的世界坐标 局部坐标系（物体坐标系、模型坐标系） 每个物体都有自身独立的物体坐标系；当物体移动...
css之旅（四）坐标系介绍
letianxf的博客
04-05 880
本文介绍了css坐标系相关
selenium直接用鼠标点击(基于x,y坐标)进行网页爬取
热门推荐
梦想还是要有的
10-11 1万+
 食品生产许可获证企业(SC)的爬取 只有名字和编号 这个网站是动态加载,并对请求ur进行了加密l 所以使用selenium 但是,selenium使用不知道为什么一旦进行了对页面数据的操作后,就无法请求到下一页的数据了,所以只能一页一页的请求不停的从第一页跳转,不能使用下一页跳转 from selenium import webdriver import pyautogui as ...
event.originalEvent.touches和event.pageX不存在怎么获得
07-15
如果 `event.originalEvent.touches` 和 `event.pageX` 属性都不存在，那么可能是因为你的事件对象 `event` 不是鼠标事件或触摸事件。在这种情况下，你可以尝试使用其他属性或方法来获取页面上的X坐标。 首先，你可以尝试使用 `event.clientX` 和 `event.clientY` 属性来获取鼠标事件的页面坐标。这两个属性表示鼠标相对于浏览器窗口可视区域的坐标，而不是相对于整个页面的坐标。 ```javascript $("#flipbook").on("mousedown", function(event) { var startX = event.clientX; // 鼠标事件的X坐标 console.log("startX:", startX); }); ``` 如果你处理的是触摸事件，可以尝试使用 `event.originalEvent.changedTouches[0].clientX` 和 `event.originalEvent.changedTouches[0].clientY` 属性来获取触摸事件的页面坐标。和鼠标事件类似，这些属性表示触摸点相对于浏览器窗口可视区域的坐标。 ```javascript $("#flipbook").on("touchstart", function(event) { var touch = event.originalEvent.changedTouches[0]; var startX = touch.clientX; // 触摸事件的X坐标 console.log("startX:", startX); }); ``` 请注意，以上代码仅适用于获取相对于浏览器窗口可视区域的坐标。如果你需要获取相对于整个页面的坐标，你可能需要结合页面滚动的位置来计算。 如果以上方法仍然无法获取到所需的坐标信息，请提供更多关于你正在处理的事件类型和代码上下文的细节，以便我们给出更具体的解决方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值