`

深刻认识clientX，offsetX，screenX

 
阅读更多

概念（来源于网络）：

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

实验实例（来源于网络，修改过）：

view plaincopy to clipboardprint?

Code:
  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
  2. <HTML>
  3. <BODYonclick='test()'style="margin:0000"mce_style="margin:0000">
  4. <fontcolor=green>设置或获取鼠标指针位置相对于窗口客户区域的x,y坐标，其中客户区域不包括窗口自身的控件和滚动条。</font>
  5. <br/>
  6. clientX=<INPUTTYPE="text"NAME="x1">
  7. clientY=<INPUTTYPE="text"NAME="x2">
  8. <br/>
  9. <br/>
  11. <fontcolor=blue>设置或获取鼠标指针位置相对于触发事件的对象的x,y坐标。</font>
  12. <br/>
  13. offsetX=<INPUTTYPE="text"NAME="x3">
  14. offsetY=<INPUTTYPE="text"NAME="x4">
  15. <br/>
  16. <br/>
  17. <fontcolor=green>设置或获取获取鼠标指针位置相对于用户屏幕的x,y坐标</font>
  18. <br/>
  19. screenX=<INPUTTYPE="text"NAME="x5">
  20. screenY=<INPUTTYPE="text"NAME="x6">
  21. <br/>
  22. <br/>
  23. <fontcolor=blue>设置或获取鼠标指针位置相对于父文档的x,y像素坐标。</font>
  24. <br/>
  25. x=<INPUTTYPE="text"NAME="x7">
  26. y=<INPUTTYPE="text"NAME="x8">
  27. <br/>
  28. <br/>
  29. <TABLEalign="center"width=400height=500border=1style="border-style:none"mce_style="border-style:none"CELLPADDING=0CELLSPACING=0onclick='test()'>
  30. <TR>
  31. <TD>a</TD>
  32. <TD>b</TD>
  33. </TR>
  34. <TR>
  35. <TD>c</TD>
  36. <TD>d</TD>
  37. </TR>
  38. </TABLE>
  39. </body>
  40. </html>
  41. <SCRIPTLANGUAGE="JavaScript">
  42. <!--
  43. functiontest(){
  44. document.all.x1.value=event.clientX;
  45. document.all.x2.value=event.clientY;
  46. document.all.x3.value=event.offsetX;
  47. document.all.x4.value=event.offsetY;
  48. document.all.x5.value=event.screenX;
  49. document.all.x6.value=event.screenY;
  50. document.all.x7.value=event.x;
  51. document.all.x8.value=event.y;
  52. }
  53. //-->
  54. </SCRIPT>
  55. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
  56. <HTML>
  57. <BODYonclick='test()'style="margin:0000"mce_style="margin:0000">
  58. <fontcolor=green>设置或获取鼠标指针位置相对于窗口客户区域的x,y坐标，其中客户区域不包括窗口自身的控件和滚动条。</font>
  59. <br/>
  60. clientX=<INPUTTYPE="text"NAME="x1">
  61. clientY=<INPUTTYPE="text"NAME="x2">
  62. <br/>
  63. <br/>
  65. <fontcolor=blue>设置或获取鼠标指针位置相对于触发事件的对象的x,y坐标。</font>
  66. <br/>
  67. offsetX=<INPUTTYPE="text"NAME="x3">
  68. offsetY=<INPUTTYPE="text"NAME="x4">
  69. <br/>
  70. <br/>
  71. <fontcolor=green>设置或获取获取鼠标指针位置相对于用户屏幕的x,y坐标</font>
  72. <br/>
  73. screenX=<INPUTTYPE="text"NAME="x5">
  74. screenY=<INPUTTYPE="text"NAME="x6">
  75. <br/>
  76. <br/>
  77. <fontcolor=blue>设置或获取鼠标指针位置相对于父文档的x,y像素坐标。</font>
  78. <br/>
  79. x=<INPUTTYPE="text"NAME="x7">
  80. y=<INPUTTYPE="text"NAME="x8">
  81. <br/>
  82. <br/>
  83. <TABLEalign="center"width=400height=500border=1style="border-style:none"mce_style="border-style:none"CELLPADDING=0CELLSPACING=0onclick='test()'>
  84. <TR>
  85. <TD>a</TD>
  86. <TD>b</TD>
  87. </TR>
  88. <TR>
  89. <TD>c</TD>
  90. <TD>d</TD>
  91. </TR>
  92. </TABLE>
  93. </body>
  94. </html>
  95. <SCRIPTLANGUAGE="JavaScript">
  96. <!--
  97. functiontest(){
  98. document.all.x1.value=event.clientX;
  99. document.all.x2.value=event.clientY;
  100. document.all.x3.value=event.offsetX;
  101. document.all.x4.value=event.offsetY;
  102. document.all.x5.value=event.screenX;
  103. document.all.x6.value=event.screenY;
  104. document.all.x7.value=event.x;
  105. document.all.x8.value=event.y;
  106. }
  107. //-->
  108. </SCRIPT>

实验结果分析：

clientX 和x值在实验过程中，没有发现值不一样的例子，所以我认为它们在效果上是一样的！
offsetX 是相对于当前窗口内，本触发事件对象（或者是某一区域）而言，如本例中你单击a区域，值是相对于a所在<td>区域而言，同理b，c，d都一样！
clientX ，x，offsetX共同点：它们是相对位置，相对于当前窗口，只是offsetX相对于当前窗口的某个触发对象的父容器而言！
screenX是相对与客户端显示器而言，是绝对位置！


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/weinideai/archive/2009/02/13/3885444.aspx

分享到：
| The implementation of anonymous methods ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    [转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别

    在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...

    clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

    `clientX`, `pageX`, `offsetX`, `x`, `layerX`, `screenX`, 和 `offsetLeft` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...

    鼠标事件clientX、clientY

    clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY

    event.x,event.clientX,event.offsetX区别

    clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] &lt;html&gt; &lt;...

    JS中坐标表示方法的异同

    本文将详细介绍`clientX`、`screenX`、`pageX`、`offsetX`等坐标系统的概念及其差异，并通过实例来帮助理解这些概念。 #### 二、`pageX`与`pageY` **定义：** `pageX`与`pageY`表示鼠标相对于整个文档的X轴和Y轴的...

    event.X和event.clientX的区别分析

    - `screenX`和`screenY`：相对于屏幕的鼠标坐标，包括浏览器窗口之外的部分。 在处理复杂的交互和用户输入时，理解这些属性可以帮助我们更精确地控制网页的行为。例如，我们可以利用`clientX`和`clientY`来实现鼠标...

    Javascript元素位置、大小、鼠标定位操作

    例如，如果鼠标处于页面的正中间，那么 clientX 等于 200，clientY 等于 190。 2. screenX 和 screenY：获取鼠标在屏幕上的横、纵坐标，相对于屏幕的左上角。 3. offsetX 和 offsetY：获取鼠标在事件源对象上的横、...

    JavaScript第九天.xmind

    4.offsetX，offsetY(鼠标相对于事件源元素的x，y坐标) 元素的offset属性： 1.offsetTop: 元素相对父元素上边的偏移。(只读) 2.offsetLeft： 元素相对父元素左边的偏移。(只读) 3.offsetWidth： 自身包括padding...

    Javascript之event大全

    clientX 属性用于返回鼠标在窗口客户区域中的 X 坐标。语法：event.clientX 注释：这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。 clientY 属性 clientY 属性用于返回...

    显示鼠标坐标信息 JavaScript代码

    - **offsetX/offsetY**：这两个属性返回鼠标相对于元素边框的左上角的水平和垂直距离，如果事件发生在body元素上，则与clientX/clientY相同。 - **pageX/pageY**：这两个属性返回鼠标相对于整个页面（包括滚动条）...

    原生JS实现拖拽图片效果

    首先，我们要了解在JavaScript事件处理中，event对象提供了几个与鼠标位置相关的属性，它们分别是clientX、offsetX、screenX和pageX。这些属性在处理拖拽操作时起着至关重要的作用： 1. clientX：表示鼠标相对于...

    Javascript dom位置、大小、鼠标定位操作

    2. `event.screenX` 和 `event.screenY`：返回鼠标在屏幕上的绝对坐标，与浏览器窗口无关。 3. `event.offsetX` 和 `event.offsetY`：返回鼠标相对于触发事件的元素（事件源）的可见部分的水平和垂直位置，不包括...

    javascript之Event详解[定义].pdf

    语法：event.clientX 注释：这是个只读属性。这意味着，你只能通过它来得到鼠标的当前位置，却不能用它来更改鼠标的位置。 5. clientY属性 clientY属性用于返回鼠标在窗口客户区域中的Y坐标。语法：event.clientY ...

    JavaScript中获取鼠标位置相关属性总结

    在现代浏览器中，推荐使用clientX和clientY来获取鼠标在视窗内的位置，使用pageX和pageY来获取鼠标在整个文档中的位置，而对于IE9及更新的浏览器，layerX和layerY是替代offsetX和offsetY的不错选择。在设计跨浏览器...

    javascript 事件对象 坐标事件说明

    - `event.offsetX` 和 `event.offsetY`：这两个属性表示鼠标相对于触发事件的元素（`e.srcElement`）的坐标。 - `event.clientX` 和 `event.clientY`：这两个属性表示鼠标相对于视口（不包括滚动条）的坐标。 - `...

    vue实现拖拽效果

    evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览器的客户端左上角为原点（不计算滚动条位置） evt.clientY evt.pageX 相对于浏览器的客户端左上角为原点（计算滚动条的位置） evt.pageY...

    Javascript获取鼠标坐标的各种类型

    同样，`event.screenX`和`event.screenY`则提供鼠标在屏幕上的绝对位置。 然而，不同浏览器之间存在差异。在Firefox 1.06+以及IE6.0以后的版本中，`clientWidth`和`clientHeight`包含了内边距（padding），而`...

    网页设计常用代码荟萃.pdf

    - `event.offsetX` 和 `event.offsetY` 分别表示鼠标相对于触发事件的元素的水平和垂直坐标。 - `event.screenX` 和 `event.screenY` 表示鼠标相对于屏幕的位置。 - `event.srcElement` 提供了触发事件的元素引用...

    【JavaScript源代码】JavaScript 鼠标事件(MouseEvent)案例讲解.docx

    - `offsetX`、`offsetY`：这两个属性提供了鼠标相对于事件源元素的位置坐标，即鼠标在元素内的位置。 - `clientX`、`clientY`：这两个属性返回鼠标相对于浏览器视口（不包括滚动条）的水平和垂直坐标。 - `pageX`、`...

Magicbox
Global site tag (gtag.js) - Google Analytics