zoukankan      html  css  js  c++  java
  • pageX,clientX,screenX,offsetX 记录

    最近在写一个可拖拽的画布功能,所以用到获取位置信息较多,由于基础不扎实忘了一些,容易混淆的API,在这里记下pageX,clientX,screenX,offsetX区别

    pageX/pageY:

    鼠标相对于整个页面的X/Y坐标。
    注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。
    特别说明:IE不支持!
    clientX/clientY:
    事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。
    浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。
    当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。
    特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY比火狐下始终大2px。
    screenX/screenY
    鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过屏幕分辨率。
    offsetX/offsetY:
    得出的结果跟pageX/pageY一样,既然如此,它有什么存在价值?因为:
    特别说明:只有IE支持!相当于IE下的pageX,pageY。

    e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft = e.pageX
    e.clientY + document.documentElement.scrollTop  - document.documentElement.clientTop = e.pageY

  • 相关阅读:
    自定义异常
    异常的处理方式之二:声明异常(throws子句)
    异常的处理方式之一:捕获异常
    CheckedException已检查异常
    Range Sum Query
    cmd命令结束占用tomcat的进程
    原生js实现瀑布流
    js实现选项卡切换
    (转载)用ul做横向导航
    帝国CMS视频
  • 原文地址:https://www.cnblogs.com/chrissong/p/10269778.html
Copyright © 2011-2022 走看看