首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.

之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解；clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性，所以必然是“鼠标事件”发生时候才会有意义；

  1. clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
  2. clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
  3. screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
  4. screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
  5. offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
  6. offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

下面我将结合我的测试代码和结果对上面的话进行解释

这是我写的测试例子的html代码

  1. <body>
  2. <span style="white-space:pre">    </span><div id="div" class="container"></div>
  3. <span style="white-space:pre">    </span><!--<div id="div1" class="container"></div>
  4. <span style="white-space:pre">    </span><input type="button" value="test" onclick="test();">-->
  5. </body>

添加一点样式

  1. <style>
  2. *{padding: 0;margin: 0;}
  3. .container{
  4. width: 200px;height: 100px;
  5. border: 1px solid #c00;
  6. }
  7. input[type="button"]{
  8. margin: 50px;
  9. border: none;
  10. width: 100px;height: 50px;background: green;
  11. }
  12. </style>

接下来是js部分的代码

  1. <script>
  2. document.onmousemove = function (ev) {
  3. var e = ev || window.event;
  4. var div = document.getElementById('div');
  5. div.innerHTML = "clientX: "+e.clientX + ",clientY:"+ e.clientY +
  6. "</br> screenX:"+ e.screenX+",screenY:" + e.screenY;
  7. }
  8. /*  function test(ev) {
  9. var e = ev || window.event;
  10. var div1 = document.getElementById('div1');
  11. div1.innerHTML = "offsetX:"+ e.offsetX +",offsetY : "+ e.offsetY;
  12. }*/
  13. </script>

这里我需要解释一下我上面说的“浏览器有效区域”这句话，下图中黑色边框区域就是浏览器的有效区域，而整个图片显示的区域就是 “显示器屏幕区域”

下图可以看到当鼠标移动事件onmousemove发生的时候，在id为div的里面显示clientX,clientY,screenX,screenY,的值；

当我的鼠标放到浏览器有效区域的 0 ，0 处，clientX为0，clientY为0；

而screenX为0，screenY为85，因为鼠标在“浏览器有效区域”里的x坐标就是0，y坐标也是0，而鼠标在“显示器屏幕区域”的x坐标是0，y坐标是85px

当我把鼠标移到div的右上角的时候，clientX为200，clientY为0；

screenX为200，screenY为85，由此可知道

clientX是鼠标相对以浏览器有效区域的的X轴坐标，

clientY是鼠标相对以浏览器有效区域的的Y轴坐标，

上图中我的鼠标在浏览器有效区域里 的x坐标是200px，y坐标是0；而screenX，screenY则是相对以整个显示屏幕区域而言的。

上图中 相对于“整个显示屏幕区域而言” 鼠标的x坐标是200px，y坐标是85px，所以screenX和screenY正是获取这两个值，所以screenX是200px，screenY是85px

当我的鼠标移动到div的右下角的时候，screeX是200px，screenY是185px，因为div本身的宽度我定义的时200px，高度100px；

接下来说一说offsetX和offsetY属性

offsetX ：当鼠标事件发生时，鼠标相对于事件源x轴的位置

offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

当我们点击test按钮的时候触发onclick事件，这里test这个按钮就是事件源，所以通过offsetX和offsetY获取的坐标值就是相对于 test按钮这个事件源的；

Test按钮自身的宽100px高50px；为了容易理解，我特意给按钮添加个margin：50px让大家看得效果明显一些；

第一次鼠标是在接近test按钮的左上角点击

相信看到这里应该能明白offsetX和offsetY是获取的什么值了吧，获取的就是鼠标相对test这个按钮的x坐标和y坐标

版权声明：本文为博主原创文章，未经博主允许不得转载。 http://blog.csdn.net/u014205965/article/details/45606797

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别的更多相关文章

  1. 元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

    总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当 ...

  2. pageX，clientX，screenX，offsetX的区别

    pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不 ...

  3. 分清clientY pageY screenY layerY offsetY的区别

    分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行 ...

  4. 【js】clientY pageY screenY layerY offsetY的区别

    clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近 ...

  5. javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX

    原文:https://www.cnblogs.com/ifworld/p/7605954.html 元素宽高 offsetWidth //返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) o ...

  6. pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标e.layerX-- ...

  7. 【转】pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX—— ...

  8. [转]pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX—— ...

  9. clientX, clientY，offsetX, offsetY,screenX, screenY, x, y

    clientX, clientY是鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0: offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置,当 ...

随机推荐

  1. Spring AOP 的实现机制

    作者:大名Dean鼎 http://www.importnew.com/28342.html AOP(Aspect Orient Programming),一般称为面向切面编程,作为面向对象的一种补充 ...

  2. go报错unimplemented: 64-bit mode not compiled in与mingw 64位安装报错ERROR res已解决

    问题一:cc1.exe: sorry, unimplemented: 64-bit mode not compiled in 参考:https://www.cnblogs.com/lesroad/p/ ...

  3. 关于async 中return 和 return await 的差异

    小七平时在使用ES2017的 async功能经常会有如下: const bluebird = require('bluebird'); async function doSomething() { a ...

  4. 使用 spring封装的javamail linux服务器发送邮件失败解决

    原文参考:https://blog.csdn.net/a540891049/article/details/79385471 由于某些平台的linxu服务器为了安全起见 屏蔽了发送邮件的常用端口 25 ...

  5. Idea中：No converter found for return value of type: class java.util.ArrayList：Json格式转换问题

    1.在搞SSM框架的时候,前端发送请求后,显示如下错误. @ResponseBody注解进行返回List<对象>的json数据时出现 nested exception is java.la ...

  6. python enumerate用法总结

    enumerate()说明enumerate()是python的内置函数enumerate在字典上是枚举.列举的意思对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enumera ...

  7. Git 工具 - 储藏（Stashing）

    储藏(Stashing) 经常有这样的事情发生,当你正在进行项目中某一部分的工作,里面的东西处于一个比较杂乱的状态,而你想转到其他分支上进行一些工作.问题是,你不想提交进行了一半的工作,否则以后你无法 ...

  8. .net回复图片

    using System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web. ...

  9. cocos图片的选择以及压缩

    我们在使用cocos在windows平台下,运行速度很快很流畅,很强大,可是当我们打包成apk文件,在手机上运行的时候,流畅度很可能降低,甚至还有间歇性内存彪高. 游戏内存优化我们一般可以从这么3个方 ...

  10. red hat下Oracle服务自启动的方法

    setup .rc.local 和chkconfig三种方式都可以设置 第一种)输入#setup指令进入系统服务菜单,选择你想启动的服务比如oralce,然后重起机器或者/etc/rc.d./init ...