screenx影厅好吗,pagex和clientx
首先，需要知道clientX、clientY、screenX、screenY、offsetX、offsetY是鼠标事件对象下的几个属性。
以前也对这些属性很模糊，但是看了文档也不太理解。 总之，我看完了雾里，自己测试了一下； 说自己的理解； “clientX”、“clientY”、“screenX”、“screenY”、“offsetX”、“offsetY”这些属性是“鼠标事件对象”下的属性，必然在“鼠标事件”发生时有意义；
clientX :鼠标事件发生时(onclick、omousemove、onmouseover等)鼠标相对于浏览器(在此为浏览器的有效区域)的x轴位置clientY (鼠标事件发生鼠标相对于浏览器(这里是浏览器的有效区域)的y轴的位置screenX :鼠标事件发生时鼠标相对于显示器画面的x轴的位置screenY :鼠标事件发生时鼠标相对于显示器画面的y轴的位置oox 鼠标相对于事件源x轴的位置offsetY :发生鼠标事件时鼠标相对于事件源y轴的位置
下面我将结合我的测试代码和结果对上面的话进行解释
这是我写的测试示例的html代码
body span style=' white-space : pre '/span divid=' div ' class=' container '/div span style=' white-space 3360 pre div span style=' white-space 3360 pre '/span input type=' button ' value=' tton ' t alue-/body
添加一点风格
style *{padding: 0； 边距： 0； } .container{ width: 200px； height: 100px； border: 1px solid #c00； } input [ type=' button ' ] { margin :50 px； border: none； width: 100px； height: 50px； background: green； (}/style
下面是js部分的代码
script document.onmousemove=function (ev ) { var e=ev || window.event； var div=document.getelementbyid (div )； div.innerhtml=' clientx : ' e.clientx '，clienty : ' e.clienty '/br screenx 3360 ' e.screenx '，screeny 33666660 var div1=document.getelementbyid (div1)； div1. innerhtml=' offsetx : ' e.offsetx '，offsetY : ' e.offsetY； (//脚本
这里，我需要说明一下上述“浏览器的有效区域”一词。 下图中的黑色边界区域为浏览器的有效区域，显示整个图像的区域为“显示画面区域”
下图显示当鼠标移动事件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坐标