`
desert3
  • 浏览: 2156044 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

pageX, pageY, screenX, screenY, clientX, clientY

    博客分类:
  • Html
 
阅读更多
pageX, pageY, screenX, screenY, clientX and clientY表示从一个点到另外一个引用点的像素值。都是event事件的属性。
事件点就是用户点击在屏幕上面的点,引用点是一个在左上位置的点。这些方法返回事件点到引用点直接的水平、垂直距离。

pageX and pageY:相对于浏览器中内容左上角的距离。这个引用点在浏览器的工具栏和回退按钮的下面。滚动条滚动时,pageX和pageY的值会变化。
screenX and screenY:相对于物理显示器左上角的距离。这个引用点只有在用户增加或者减少屏幕分辨率的时候会发生变化。
clientX and clientY:相对于浏览器左上角的距离。当用户移动或者放大缩小浏览器时,这个引用点会发生变化。当用户在浏览器内部滚动滚动条是,这个引用点不会发生变化。

可以到网站quirksmode上查看浏览器对于上述事件的支持情况。
分享到:
评论

相关推荐

    [转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别

    在JavaScript中,处理鼠标事件时,经常会遇到一系列与鼠标位置相关的属性,如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...

    鼠标事件clientX、clientY

    clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY

    touch:轻量级移动端触摸手势库

    回调函数的参数回调函数里面的参数event包含4个属性:pagex,pageY,clientX,clientY,screenX,screenY,direction,displacementX,displacementY.screenX事件发生时手指触摸位置距离屏幕左上角的X方向(水平)距离.screenY...

    JS获取鼠标坐标位置实例分析

    取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置...

    JS中坐标表示方法的异同

    本文将详细介绍`clientX`、`screenX`、`pageX`、`offsetX`等坐标系统的概念及其差异,并通过实例来帮助理解这些概念。 #### 二、`pageX`与`pageY` **定义:** `pageX`与`pageY`表示鼠标相对于整个文档的X轴和Y轴的...

    JavaScript第九天.xmind

    2.pageX,pageY(对于整个页面来说,包括被卷去的body部分的长度) 3.screenX,screenY(点击位置距离当前电脑屏幕的x,y坐标) 4.offsetX,offsetY(鼠标相对于事件源元素的x,y坐标) 元素的offset属性: 1....

    js实现获取鼠标当前的位置

    通过clientX和clientY属性获取客户区坐标,通过pageX和pageY属性获取页面坐标,以及通过screenX和screenY属性获取屏幕坐标。这些技术点在动态交互的Web页面设计中非常实用,可以广泛应用于拖拽操作、绘图应用、鼠标...

    移动端web总结笔记1

    * pageX/pageY/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置。 在使用触摸事件时,我们需要注意阻止浏览器的默认事件,例如使用 e.preventDefault()。 三、页面跳转 页面跳转是移动端 Web...

    document-create-touch.rar_touch

    document.createTouch(view, target, identifier, screenX, screenY, clientX, clientY, pageX, pageY, radiusX, radiusY, rotationAngle, force) ``` 参数解释如下: 1. `view`:通常为`window`对象,表示触控...

    Swiper-master touchjs-master TweenJS-master zepto-master

    Swiper-master是纯...重要属性如下:clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY: 触摸点相对于页面的位置;screenX,screenY:触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID

    js Event对象的5种坐标

    5. **screenX 和 screenY**: 这两个属性表示鼠标指针相对于屏幕左上角的位置,而不是浏览器窗口。这个信息在处理全屏或多个显示器的场景时可能有用。 在实际开发中,为了确保兼容性,通常需要结合使用这些坐标...

    vue实现拖拽效果

    首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3(事件对象中记录的鼠标位置) 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览器的客户端左上角为原点...

    Javascript 获取鼠标当前的位置实现方法

    var pageX = event.pageX, pageY = event.pageY; if (pageX === undefined) { // IE8及更早版本 pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if (pageY ==...

    显示鼠标坐标信息 JavaScript代码

    - 当处理滚动时,`pageX`和`pageY`会考虑页面的滚动位置,而`clientX`和`clientY`则不会。 - 在移动设备上,由于触摸操作,可能需要监听`touchmove`事件而非`mousemove`。 5. **示例代码** 下面是将鼠标坐标显示...

    JavaScript中获取鼠标位置相关属性总结

    在现代浏览器中,推荐使用clientX和clientY来获取鼠标在视窗内的位置,使用pageX和pageY来获取鼠标在整个文档中的位置,而对于IE9及更新的浏览器,layerX和layerY是替代offsetX和offsetY的不错选择。在设计跨浏览器...

    JS中各种尺寸的获取

    关于clientX/clientY与pageX/pageY的关系,当没有滚动条时,pageX等于clientX,pageY等于clientY,因为没有额外的滚动偏移。但当页面有滚动条时,pageX和pageY会加上滚动条滚动的距离(ScrollLeft和ScrollTop)。 ...

    event对象总结,更详细更全面

    * clientX和clientY:事件发生时鼠标相对于浏览器左上角的X/Y坐标 * screenX和screenY:事件发生时鼠标相对于显示器左上角的X/Y坐标 事件对象的方法 事件对象还拥有一些重要的方法,例如: * stopPropagation():...

    dom

    垂直坐标pageX,pageY:事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标,垂直坐标screenX,screenY:事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标,垂直坐标,此时的参照点也...

    html5构建触屏网站之touch事件介绍

    3. pageX/pageY、clientX/clientY、screenX/screenY:分别表示手指在页面、视口和屏幕的位置坐标。 4. radiusX/radiusY、rotationAngle:描绘手指形状的椭圆半径和旋转角度,但并非所有浏览器都支持。 四、示例应用...

Global site tag (gtag.js) - Google Analytics