资讯专栏INFORMATION COLUMN

关于offsetX、layerX、clientX、screenX以及pageX(Y同理)

Rindia / 2501人阅读

摘要:关于以及我们都熟知,标题中的几个方法都是用来获取事件的位置,但是他们有什么区别呢就用一张图来说明指事件发生位置相对触发元素左上角的水平坐标特有鼠标相比较于当前坐标系的位置即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系,以该

关于offsetX、layerX、clientX、screenX以及pageX

我们都熟知,标题中的几个方法都是用来获取事件(event)的位置,但是他们有什么区别呢?就用一张图来说明:

offsetX: 指事件发生位置相对触发元素左上角的水平坐标

layerX: FF特有,鼠标相比较于当前坐标系的位置,即从当前容器依次往上寻找设置绝对定位或相对定位的元素为参考坐标系,以该容器的左上角来计算水平坐标

clientX: 是指事件发生位置相对可视区域的水平坐标(只是document展现的部分,不包括搜索栏、书签栏等)

screenX: 是指事件发生位置相对电脑屏幕的水平坐标

pageX: 是指事件发生位置相对文档(document)的水平坐标(是指整个文档,当出现滚动条时,隐藏的部分也会被算入pageX)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109335.html

相关文章

  • 鼠标点击的各种坐标 (事件对象)

    摘要:返回事件发生时,鼠标指针相对于浏览器窗口可视区域的水平垂直窗口坐标。可视区域不包括工具栏和滚动条,事件和标准事件都定义了这个属性返回鼠标指针的位置,类似于,但它们使用的是文档坐标而非窗口坐标。是相对于被点击了的元素。 e.clientX,e.clientY返回事件发生时,鼠标指针相对于浏览器窗口可视区域的水平(垂直)窗口坐标。可视区域不包括工具栏和滚动条,IE事件和标准事件都定义了这2...

    xushaojieaaa 评论0 收藏0
  • 鼠标点击的各种坐标 (事件对象)

    摘要:返回事件发生时,鼠标指针相对于浏览器窗口可视区域的水平垂直窗口坐标。可视区域不包括工具栏和滚动条,事件和标准事件都定义了这个属性返回鼠标指针的位置,类似于,但它们使用的是文档坐标而非窗口坐标。是相对于被点击了的元素。 e.clientX,e.clientY返回事件发生时,鼠标指针相对于浏览器窗口可视区域的水平(垂直)窗口坐标。可视区域不包括工具栏和滚动条,IE事件和标准事件都定义了这2...

    xiongzenghui 评论0 收藏0
  • JS基础篇--了解JS的clientXpageXscreenX等方法来获取鼠标坐标详解

    摘要:相对浏览器窗口简单代码即可实现,然而这是还不够,因为绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标,的,属性分别表示鼠标点击位置相对于文档的左边距,上边距。 在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8...

    phodal 评论0 收藏0
  • 【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,

    摘要:指鼠标指针相对于触发事件元素的左上角的偏移,在,中指外边缘,即将该元素边框的宽度计算在内,则不包含边框值,如下图所示和是相对文档窗口左上角的距离,不会随滚动条移动和是相对于浏览器可视窗口左上角的距离,参照点会随滚动条滚动而移动当可视窗口和文 offsetX,offsetY:指鼠标指针相对于触发事件元素的左上角的偏移,在Chrome,Opera,Safari中指外边缘,即将该元素边框的宽...

    darryrzhong 评论0 收藏0
  • 重探浏览器事件(浅析事件编程化)

    前言 在平常开发过程中,就算不使用现在主流的框架也至少得使用个Jquery,这些工具帮我们统一不同浏览器平台之间的差异和细节,可以将注意力集中到开发上来. 不过有意思的一点是,在看完高程的N年后我居然连event对象中的target和currentTarget属性的区别都忘记了. 先提几个引子: 你能说出event.currentTarget和event.target的区别吗? 如果可以那么ev...

    lk20150415 评论0 收藏0

发表评论

0条评论

Rindia

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<