`
peswe
  • 浏览: 14864 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

clientX,clientY,x,y等的区别[转]

浏览器Microsoft 
阅读更多
clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0；
offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0；
screenX, screenY是相对于用户显示器的位置
x,y是鼠标相对于当前浏览器的位置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Measure for Measure</TITLE>
<SCRIPT>
<!--
function one() {
report.value = "The DIV above is relatively positioned in the BODY.   The style object contains the information that was set in the inline style to position this object.   The following are the values that would be reported for the various position and dimension properties on the style object for the DIV:" + "\n\n";
report.value= report.value + " mydiv.style.top (string) = " + foodiv.style.top + "\n";
report.value= report.value + " mydiv.style.left (string) = " + foodiv.style.left + "\n";
report.value= report.value + " mydiv.style.height (string) = " + foodiv.style.height + "\n";
report.value= report.value + " mydiv.style.width (string) = " + foodiv.style.width + "\n";
report.value= report.value + " mydiv.style.pixelTop (long) = " + foodiv.style.pixelTop + "\n";
report.value= report.value + " mydiv.style.pixelLeft (long) = " + foodiv.style.pixelLeft + "\n";
report.value= report.value + " mydiv.style.pixelHeight (long) = " + foodiv.style.pixelHeight + "\n";
report.value= report.value + " mydiv.style.pixelWidth (long) = " + foodiv.style.pixelWidth + "\n";
report.value= report.value + " mydiv.style.posTop (long) = " + foodiv.style.posTop + "\n";
report.value= report.value + " mydiv.style.posLeft (long) = " + foodiv.style.posLeft + "\n";
report.value= report.value + " mydiv.style.posHeight (long) = " + foodiv.style.posHeight + "\n";
report.value= report.value + " mydiv.style.posWidth (long) = " + foodiv.style.posWidth + "\n";
}
function two() {
report.value = "Each object has a set of offset positions.   The offset properties for the positioned darkBlue DIV above are: \n";
report.value= report.value + "    offsetLeft = " + foodiv.offsetLeft + "\n";
report.value= report.value + "    offsetTop = " + foodiv.offsetTop + "\n";
report.value= report.value + "    offsetHeight = " + foodiv.offsetHeight + "\n";
report.value= report.value + "    offsetWidth = " + foodiv.offsetWidth + "\n";
report.value= report.value + "    offsetLeft = " + document.body.offsetLeft + "\n";
report.value= report.value + "    offsetTop = " + document.body.offsetTop + "\n";
report.value= report.value + "    offsetHeight = " + document.body.offsetHeight + "\n";
report.value= report.value + "    offsetWidth = " + document.body.offsetWidth + "\n";
}
function three() {
report.value = "Scroll values for the darkBlue DIV object" + "\n";
report.value= report.value + "    scrollLeft = " + foodiv.scrollLeft + "\n";
report.value= report.value + "    scrollTop = " + foodiv.scrollTop + "\n";
report.value= report.value + "    scrollHeight = " + foodiv.scrollHeight + "\n";
report.value= report.value + "    scrollWidth = " + foodiv.scrollWidth + "\n";
report.value = report.value   + "Scroll values for the BODY" + "\n";
report.value= report.value + "    scrollLeft = " + document.body.scrollLeft + "\n";
report.value= report.value + "    scrollTop = " + document.body.scrollTop + "\n";
report.value= report.value + "    scrollHeight = " + document.body.scrollHeight + "\n";
report.value= report.value + "    scrollWidth = " + document.body.scrollWidth + "\n";
}
function four() {
report.value = "";
report.value= report.value + " clientHeight for the BODY: " + document.body.clientHeight + "\n";
report.value= report.value + " clientWidth for the BODY:" + document.body.clientWidth + "\n";
report.value= report.value + " clientTop for the BODY:" + document.body.clientTop + "\n";
report.value= report.value + " clientLeft for the BODY:" + document.body.clientLeft + "\n";
report.value= report.value + " clientHeight for this TEXTAREA:" + report.clientHeight + "\n";
report.value= report.value + " clientWidth for this TEXTAREA: " + report.clientWidth + "\n";
report.value= report.value + " clientTop for this TEXTAREA:" + document.body.clientTop + "\n";
report.value= report.value + " clientLeft for this TEXTAREA:" + document.body.clientLeft + "\n";
}
function five() {
report.value = "You clicked the mouse in the input button.   The following reports the various x and y values that are passed on the event object for this mouse click event \n";
report.value= report.value + "    window.event.x = " + window.event.x + "\n";
report.value= report.value + "    window.event.y = " + window.event.y + "\n";
report.value= report.value + "    window.event.offsetX = " + window.event.offsetX + "\n";
report.value= report.value + "    window.event.offsetY = " + window.event.offsetY + "\n";
report.value= report.value + "    window.event.screenX = " + window.event.screenX + "\n";
report.value= report.value + "    window.event.screenY = " + window.event.screenY + "\n";
report.value= report.value + "    window.event.clientX = " + window.event.clientX + "\n";
report.value= report.value + "    window.event.clientY = " + window.event.clientY + "\n";
}
-->
</script>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">
<!-- SAMPLE_STYLE_START -->
<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">
<!-- SAMPLE_STYLE_END -->
</HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->
<BODY style="border:lightBlue solid 15;margin:10px;padding:10px;background-color:navy;font-family:arial" LINK="#FFFFFF" VLINK="#808080" ALINK="#000000">
<DIV id="foodiv" style="position:relative;top:5;left:5;height:150;width:200;overflow:scroll;margin:20px;background-color:white;padding:20px;border-color:lightBlue;border-width:10;border-style:solid">
DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool!
</DIV>
<input type=button onclick=one() value="Style Positions" style="background-color:lightBlue;font-family:arial">
<input type=button onclick=two() value="Object Offset" style="background-color:lightBlue;font-family:arial">
<input type=button onclick=three() value="Scroll Positions" style="background-color:lightBlue;font-family:arial">
<input type=button onclick=four() value="Client Area" style="background-color:lightBlue;font-family:arial">
<input type=button onclick=five() value="Event Object" style="background-color:lightBlue;font-family:arial">
<BR>
<center id="title"></center>
<TEXTAREA id="report" rows=10 cols=50 wrap=physical style="font-family:arial">
</TEXTAREA>
<!-- START_PAGE_FOOTER -->
<BR><BR><BR>
&copy; <A CLASS="clsIncCpyRt" HREF="../isapi/gomscom.asp@target=_2Fmisc_2Fcpyright.htm" TARGET="_top">Microsoft Corporation. All rights reserved. Terms of use</A>.
<!-- END_PAGE_FOOTER -->
</BODY>
</HTML>

回复：

问：解释一下event.X和event.clientX有什么区别？
答：
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标
event.X也一样
但是如果设置事件对象的定位属性值为relative
event.clientX不变
而event.X返回事件对象的相对于本体的坐标
event对象详解 ICOOE 2000.3.31   http://www.51js.com/
event代表事件的状态，例如事件发生的的元素、鼠标的位置等等，event对象只在事件过程中才有效。
event属性：
altKey
检索ALT键的当前状态
可能的值 true为关闭
false为不关闭
button
检索按下的鼠标键
可能的值： 0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键
cancelBubble
设置或检索当前事件是否将事件句柄起泡
可能的值： false 启用起泡
true 取消该事件起泡
clientX
检索与窗口客户区域有关的鼠标光标的X坐标，属性为只读，没有默认值。
clientY
检索与窗口客户区域有关的鼠标光标的Y坐标，属性为只读，没有默认值。
ctrlKey
ctrlKey 检索CTRL键的当前状态
可能的值 true为关闭
false为不关闭
dataFld
检索被oncellchange事伯影响的列
aTransfer
为拖放操作提供预先定义的剪贴板式。
Element
检索在on mouseover和on mouseout事件期间退出的对象指针
keyCode
设置或检索与引发事件的关键字相关联的Unicode关键字代码
该属性与onkeydown onkeyup onkeypress一起使用
如果没有引发事件的关键字，则该值为0
offsetX
检索与触发事件的对象相关的鼠标位置的水平坐标
offsetY
检索与触发事件的对象相关的鼠标位置的垂直坐标
propertyName
检索在对象上己更改的特性的名称
reason
检索数据源对象数据传输的结果
可能的值：
0 数据传输成功
1 数据传输失败
2 数据传输错误
recordset
检索数据源对象中默认记录集的引用
该特性为只读
repeat
检索一个事件是否被重复
该属性只有在onkeydown事件重复时才返回true
returnvalues
设置或检索从事件中返回的值
可能的值：
true 事件中的值被返回
false 源对象上事件的默认操作被取消
screenX
检索与用户屏相关的鼠标的水平位置
screenY
检索与用户屏相关的鼠标的垂直位置
shiftKey
检索shiftKey键的当前状态
可能的值 true为关闭
false为不关闭
srcElement
检索触发事件的对象
srcFilter
检索导致onfilterchange事件触发的过滤器对象
srcUm
检索触发事件行为的同一资源名称
除非下面两个条件都为真，否则该特性被设置为null
1.行为被附加到触发事件的要素上
2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件
toElement
检索作为on mouseover或者on mouseout事件结果而移动的对象
type
检索事件对象中的事件名称
x
检索相对于父要素鼠标水平坐标的整数
y
检索相对于父要素鼠标垂直坐标的整数
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。
分享到：
arguments,caller,callee[转]
评论
发表评论

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

相关推荐

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

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

    快速取鼠标X和Y的坐标

    JavaScript在浏览器环境中，可以使用`event.clientX`和`event.clientY`来获取鼠标相对于当前元素的坐标，或者在Node.js中使用第三方库如`mouse-position`来获取全局坐标。 在C#中，我们可以使用`System.Windows....

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

    在处理鼠标事件时，我们常常会遇到`event.X`和`event.clientX`这两个属性，它们都是用来获取鼠标位置的，但有微妙的差别。 `event.clientX`属性返回的是鼠标指针在浏览器的可视窗口（客户区域）内的X坐标，不包括...

    js与jquery中获取当前鼠标的x、y坐标位置的代码.docx

    `event.clientX`返回鼠标相对于视口左边缘的X坐标，`event.clientY`返回相对于视口顶部的Y坐标。由于浏览器可能会有滚动条，所以我们需要加上`scrollLeft`和`scrollTop`来修正坐标值。 ### jQuery 获取鼠标坐标 ...

    多触点拖拽缩放旋转

    centerPoint = { x: (touch1.clientX + touch2.clientX) / 2, y: (touch1.clientY + touch2.clientY) / 2 }; } }); document.getElementById('canvas').addEventListener('touchmove', event =&gt; { if (event....

    鼠标轨迹记录（可以还原，并把坐标x，y，时间记录到access数据库中）

    var x = event.clientX; var y = event.clientY; console.log('X:', x, 'Y:', y); }); ``` 这段代码会在每次鼠标移动时打印出当前的X和Y坐标。 接下来是**坐标还原**，这通常是指根据记录下来的坐标数据，重新...

    javascrtpt 实现窗口拖拽、移动功能、显示坐标

    document.getElementById("span1")[removed] = "x:" + div.style.top + " " + "y:" + div.style.left; } } function mouseUp(e) { if (isDowm) { var x = e.clientX; var y = e.clientY; var div = document....

    当前鼠标的光标坐标是多少

    x=event.clientX y=event.clientY alert&#40;"X 坐标： " + x + ", Y 坐标： " + y&#41; } [removed] &lt;/head&gt; &lt;body &lt;p&gt;在此文档中按下你鼠标的左键看看！&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;

    让交互更加生动！有意思的鼠标跟随 3D 旋转动效.doc

    当鼠标在页面上移动时，事件对象会包含`clientX`和`clientY`属性，分别表示鼠标相对于视口左上角的水平和垂直位置。例如： ```javascript document.body.addEventListener('mousemove', function(event) { var ...

    How to Read Mouse Coordinates using Javascript.zip

    console.log('X坐标:', event.clientX, 'Y坐标:', event.clientY); }); ``` 这段代码会打印出每次鼠标移动时的坐标值。 2. **限制坐标范围** 在某些情况下，我们可能希望限制鼠标的活动范围，比如在一个特定...

    图片坐标选点

    if (x === predefinedPoints[i].x && y === predefinedPoints[i].y) { // 跳转或其他操作 break; } } }); ``` 在这个例子中，`predefinedPoints`数组存储了预设的坐标点，如果用户点击的坐标与预设点匹配，...

    JavaScript第九天.xmind

    1.clientX，clientY(点击位置距离当前body可视区域的x，y) 2.pageX，pageY(对于整个页面来说，包括被卷去的body部分的长度) 3.screenX，screenY(点击位置距离当前电脑屏幕的x，y坐标) 4.offsetX，offsetY(鼠标相...

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

    4. x 和 y：一般情况下，这两个属性与 clientX、clientY 相似，但有所不同。 二、DOM 对象 DOM 对象提供了多个属性来获取元素的位置、大小等信息。其中包括： 1. offsetTop 和 offsetLeft：获取元素相对于其 ...

    canvas绘制直线并跟随鼠标旋转

    - 鼠标位置获取：在事件处理函数中，`event.clientX`和`event.clientY`可以获取鼠标相对于视口的X和Y坐标。 4. **图形旋转**： - `save()`：保存当前的绘图状态（包括变换矩阵）。 - `translate(x, y)`：将当前...

    鼠标移动位置数值的实时显示

    描述中提到的“在鼠标的右下角呈现此刻鼠标移动的位置，并以坐标形式呈现”意味着我们需要关注两个关键属性：`clientX`和`clientY`。 `clientX`和`clientY`是JavaScript中用于获取鼠标在浏览器视口内横纵坐标的方法...

    CSS3感知方向图片翻转动画特效.zip

    let xDiff = event.clientX - rect.left; let yDiff = event.clientY - rect.top; // 计算翻转角度 let flipAngle; if (xDiff ) { flipAngle = (rect.width / 2 - xDiff) / (rect.width / 2) * 180; // 左侧...

    获取鼠标相对位置

    通过正确地使用`event.clientX`、`event.clientY`以及`getBoundingClientRect()`，开发者可以精确地获取到鼠标在页面或特定元素上的坐标，从而实现更丰富的用户交互体验。对于`ImageSpliter.js`这样的图像处理工具，...

    jquery鼠标移动特效

    var X = event.clientX+'px'; var Y = event.clientY+'px'; console.log(X); console.log(Y); $('.x').css({ 'top': Y }); $('.y').css({ 'left': X }); }); &lt;/script&gt;

    使用JavaScript获取客户端的鼠标坐标信息

    总结起来，通过JavaScript获取客户端鼠标的坐标信息主要涉及`event.clientX`、`event.clientY`、`getBoundingClientRect()`以及滚动偏移量等概念。理解和掌握这些知识点，可以让你在构建交互式Web应用时更加得心应手...

    javascript跟随鼠标x,y坐标移动的字效果

    2. **兼容性**：需要注意不同浏览器对事件对象的支持情况，例如`event.x`和`event.y`在某些旧版本浏览器中可能不可用，此时可以使用`event.clientX`和`event.clientY`作为替代。 3. **用户体验**：增加限制条件（如...

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