资讯专栏INFORMATION COLUMN

【面试篇】event对象中offsetX,clientX,pageX,screenX,layerX,

darryrzhong / 3101人阅读

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

offsetX,offsetY:指鼠标指针相对于触发事件元素的左上角的偏移,在Chrome,Opera,Safari中指外边缘,即将该元素边框的宽度计算在内,firefox则不包含边框值,如下图所示:

pageX和pageY是相对文档窗口左上角的距离,不会随滚动条移动

clientX和clientY是相对于浏览器可视窗口左上角的距离,参照点会随滚动条滚动而移动

当可视窗口和文档窗口重叠时,pageX和clientX相等

当缩小可视窗口致使浏览器出现滚动条时,clientX

screenX和screenY:鼠标位置相对于用户屏幕左上角的距离

layerX和layerY:FF特有,当触发元素没有设置绝对定位或相对定位,则以页面为参考点,如果设置了,则以触发盒子的左上角为参考点(包含border)

X和Y:IE特有,由于IE坐标选择十分混乱,故尽量不要使用

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

转载请注明本文地址:https://www.ucloud.cn/yun/111786.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
  • 关于offsetXlayerXclientXscreenX以及pageX(Y同理)

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

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

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

    lk20150415 评论0 收藏0

发表评论

0条评论

darryrzhong

|高级讲师

TA的文章

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