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

最新推荐文章于 2023-02-19 20:56:25 发布
最新推荐文章于 2023-02-19 20:56:25 发布
阅读量1.3k 收藏
点赞数
分类专栏： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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。你永远不需要知道事件相对于屏幕的坐标。

tuhuolong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Unity中屏幕坐标、视口坐标和世界坐标、局部坐标与其之间的相互转换
TAOTAO
05-18 8908
全局坐标系（世界坐标系） 在Unity中创建的物体都是以全局坐标系中的坐标原点（0,0,0），来确定各自的位置的 Unity中，如果一个游戏物体没有父物体，则 Inspector中transform 显示的为全局坐标 Unity中，可以用 transform.position 取得一个物体的世界坐标 局部坐标系（物体坐标系、模型坐标系） 每个物体都有自身独立的物体坐标系；当物体移动...
[js] 图解 event.pageX event.clientX event.offsetX getBoundingClientRect
qq_14993591的博客
09-06 401
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性。鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。
Css实现坐标点位效果
用心创作每一篇文章
02-19 223
【代码】Css实现坐标点位效果。
CSS 坐标系
weixin_43663349的博客
06-15 1212
CSS 坐标系 概念：css3中网页不再是一个二维平面，而是一个三维空间，水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x，y，z轴，如下图所示。箭头方向为正向，反之为负向(注意y轴方向与常规笛卡尔坐标系相反) ...
关于浏览器和屏幕的坐标大全
weixin_34199405的博客
06-08 201
<body onclick="Text()"> <script type="text/javascript">var strInfo="";function Text(){strInfo+=window.event.x; //设置或获取鼠标指针位置相对于父文档的 x 像素坐标strInfo+="\n"+window.event.y;//设置或获取鼠标指针位置相对...
浏览器获取元素坐标方法
AI_xiao_的博客
10-25 3071
浏览器获取元素坐标方法 用微信等软件的截屏操作，鼠标指向的位置会出现坐标。
利用jQuery的$.event.fix函数统一浏览器event事件处理
01-19
比如得到触发事件的元素引用在IE浏览器下是：event.srcElement，在FF浏览器下则是：event.target，另外又比如在FF浏览器下得到光标相对页面的位置是event.pageX，而IE浏览器下的处理方式又是不一样的，当然还有一些...
js Event对象的5种坐标
12-07
1. **clientX** 和 **clientY**: 这两个属性表示鼠标相对于浏览器视口左上角的坐标。它们不包括滚动条的影响，因此即使页面被滚动，这些值也不会改变。在大部分现代浏览器中，clientX和clientY都是可靠的选择，但在...
整理的比较全的event对像在ie与firefox浏览器中的区别
01-19
如onmousemove=doMouseMove(event) 鼠标当前坐标 IE：event.x和event.y。 FF：event.pageX和event.pageY。 通用：两者都有event.clientX和event.clientY属性。 鼠标当前坐标(加上滚动条滚过的距离) IE：event....
js网页点击右键菜单代码.zip
最新发布
10-08
$('.contextmenu').addClass('show').offset({ top: event.pageY, left: event.pageX }); // 显示菜单并设置位置 }).on('click', function() { $('.contextmenu').removeClass('show'); // 在任何地方点击时隐藏...
浏览器可视区坐标
牛不说话
08-18 769
getBoundingClientRect()亲测兼容ie7+下面的算法是为了解决ie下2个像素的差异 getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离. var box=document.getElementById(‘box’); //
css之旅（四）坐标系介绍
letianxf的博客
04-05 780
本文介绍了css坐标系相关
区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”
php_martin的博客
08-05 197
区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”
输出图片任意点的像素坐标
weixin_43645003的博客
03-28 4837
本来我是想找个脚本自己收能量的，因为分辨率不同，所以参数也要改，然后用PS标尺+计算器算感觉很麻烦，然后发现微软自带的画图工具，好像就可以，找到图片，然后右键编辑，左下角就会显示像素坐标了。 ...
计算机图形学06一一像素坐标和二维坐标的区别
XX的博客
03-14 4727
像素编制和对象的几何要素 当对象经扫描转换进帧缓存后，输入描述变换为对应有限屏幕区域的像素坐标，且显示的光栅图像可能并不严格符合相关的尺寸。如果要保证 世界坐标中对象的几何描述，我们可以在输入的数学点到有限的像素区域 映射中进行补偿。 如果将线段端点(20,10)和(30,18) 解析为精确的网格交点位置(网格交点:也就是那种坐标点 不是像素坐标那种一个格子一
JavaScript与CSS — 元素的位置和各种坐标系
热门推荐
千里之外
03-10 1万+
使用位置、尺寸和可见性基本就可以在现代浏览器中模拟绝大多数常见的用户效果了。元素的位置是实现交互效果的基础。在CSS中，元素使用偏移量来定位，它是通过元素到它父元素的左上角的偏移量来计算。CSS的坐标系如下图 页面上的所有元素都有left（水平位置）和top（垂直位置）的偏移量。为了更好理解这一点，先了解一下CSS的定位方式。基础的HTML代码是： p {     b
css怎么设置z坐标,CSS 定位（postion、z-index）
weixin_34847632的博客
08-04 2035
CSS 定位CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute, fixed)：普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中 position: static 与 position: relative 属于普通流的定位方式浮动定位机制绝对定位包括 absolute和 fixedposition: static(默认) | ...
理解 CSS 坐标
rose001的专栏
02-11 2734
CSS 用于 Web 页面的布局，布局涉及元素的位置，元素位置必须参照坐标系来确定。CSS 坐标系与数学坐标系不同，它的坐标原点在浏览器可视窗口或元素的左上角，x 轴正方向向右，而 y 轴正方向则向下，如下图所示。CSS 坐标单位包括数值、百分比和相对单位。一个 Web 页面中，不止一个坐标系，而是有多个元素就有多少个体系。以水平选项卡式的导航条为例，下图的效果：使用了下面一张背景
Javascript获取鼠标点击坐标
zjp的专栏
03-15 864
function getMousePos() {  var e = arguments[0]||window.event;  var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;  var scrollY = document.documentElement.scrollTop ||
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、付费专栏及课程。

余额充值