资讯专栏INFORMATION COLUMN

JS -- offsetXY、clientXY、pageXY、screenXY的区别

wmui / 1559人阅读

摘要:以选中元素的盒子模型的左上角为原点,与滚动条无关是该事件发生的盒子模型里的坐标。以用户屏幕左上角为原点是鼠标位置相对于用户屏幕左侧水平偏移量,而则是鼠标相对于屏幕顶部垂直方向的偏移量。

offsetXY

以选中元素的盒子模型的左上角为原点,与滚动条无关

是该事件发生的盒子模型里的坐标。

clientXY

以浏览器可视区域的左上角为原点,与滚动条无关

是整个浏览器可用部分里的坐标。

pageXY

以浏览器可视区域的左上角为原点,与滚动条有关

是整个网页里的坐标,按照整个页面长度计算(包括滚动条长度)。
无滚动条时和clientXY一样。

screenXY

以用户屏幕左上角为原点

screenX 是鼠标位置相对于用户屏幕(左侧)水平偏移量,而 screenY 则是鼠标相对于屏幕(顶部)垂直方向的偏移量。

参考图

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

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

相关文章

  • clientXYoffsetXYpageXY区别

    摘要:简单说起来,就是是该事件发生的盒子模型里的坐标,与滚动条无关。页面里写了个,背景颜色蓝色,长宽都是,在网页的右上角,的位置。结果注意两次的和有点误差,这个误差在以内都是没问题的。而是很夸张的数字,因为这是按照整个页面长度来计算的。 简单说起来,就是: offsetXY:是该事件发生的盒子模型里的坐标,与滚动条无关。 clientXY:是整个浏览器可用部分里的坐标,与滚动条无关。 pag...

    terasum 评论0 收藏0
  • clientXYoffsetXYpageXY区别

    摘要:简单说起来,就是是该事件发生的盒子模型里的坐标,与滚动条无关。页面里写了个,背景颜色蓝色,长宽都是,在网页的右上角,的位置。结果注意两次的和有点误差,这个误差在以内都是没问题的。而是很夸张的数字,因为这是按照整个页面长度来计算的。 简单说起来,就是: offsetXY:是该事件发生的盒子模型里的坐标,与滚动条无关。 clientXY:是整个浏览器可用部分里的坐标,与滚动条无关。 pag...

    rainyang 评论0 收藏0
  • D3 源代码解析(二)

    摘要:第一节点位于第二节点内。例如,返回意味着在在内部,并且在之前。这个函数返回一个函数,返回的函数绑定了当前对象并执行。 这是继上一篇D3源码解构文章后的对D3的研究笔记,笔者的能力有限,如有哪里理解错误,欢迎指正。 对集合的操作 关于d3.attr 一个可以处理很多情况的函数,当只传入一个参数时,如果是string,则返回该属性值,如果是对象,则遍历设置对象的键值对属性值,如果参数大于等...

    tainzhi 评论0 收藏0
  • 前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)

    摘要:并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题,由基础到困难循序渐进,适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档,优化项目,在浏览器端的层面上提升速度,帮助初中级前端工程师快...

    pumpkin9 评论0 收藏0

发表评论

0条评论

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