有关于e.clientX/Y,e.offsetX/Y和e.screenX/Y

e.clientX、e.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条

e.pageX、e.pageY

类似于e.clientX、e.clientY，但它们使用的是文档坐标而非窗口坐标

e.offsetX、e.offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标

e.screenX、e.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标

另附一张超具体：


©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 十二、事件
      JavaScript 与 HTML 之间的交互是通过事件实现的。   事件，就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1赞 11
  • 事件类型
    本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件，主要有以下一些。 click 事件，dblc...
    许先生__阅读 2,536评论 0赞 4
  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,067评论 0赞 2
  • 元素和鼠标事件的距离属性
    js中有很多“距离”，为了不会混淆这里总结一下其中部分距离 本文包括元素属性相关的距离和鼠标事件中的距离，废话不多...
    faremax阅读 1,685评论 0赞 2
  • 【javascript】事件类型
    事件类型 Web 浏览器中可能发生的事件有很多类型UI事件：当用户与界面上的元素交互时触发。焦点事件：当元素获得或...
    shanruopeng阅读 964评论 0赞 0