pageX:鼠标点击位置相对于网页左上角的水平偏移量,也就是clientX加上水平滚动条的距离 pageY:鼠标点击位置相对于网页左上角的垂直平偏移量,也就是clientY加上垂直滚动条的距离 4、offsetX和offsetY offsetX:鼠标点击位置相对于触发事件对象的水平距离 offsetY:鼠标点击位置相对于触发事件对象的垂直距离 Top~~ event....
clientX和 clientY 是可视区域的 x,y的坐标, 以浏览器左上角的x,y为起点为坐标系计算 image.png image.png offsetX、offsetY 事件触发相对于当前元素自身的位置的x,y坐标 image.png screenX、screenY 距离当前电脑屏幕的x,y坐标 (屏幕分辨率的宽度计算) image.png pageX、pageY 是相对于整个页面来说,包括了...
clientX是鼠标相对以浏览器有效区域的的X轴坐标, clientY是鼠标相对以浏览器有效区域的的Y轴坐标, 上图中我的鼠标在浏览器有效区域里 的x坐标是200px,y坐标是0;而screenX,screenY则是相对以整个显示屏幕区域而言的。 上图中 相对于“整个显示屏幕区域而言” 鼠标的x坐标是200px,y坐标是85px,所以screenX和scree...
screenX是相对屏幕,包含了浏览器任务栏等,所以screenY永远是最大的; pageX和clientX在无滚动条的情况下是完全相同的; offsetX会受到监听目标中嵌套元素的影响,有元素嵌套时谨慎使用。
} } 二、不同浏览器对这些属性的支持: 三、图解 event.offsetX,event.clientX,event.pageX,event.screenX属性 四、图解 event.layerX,event.layerY 属性 五、图解 event.layerX,event.layerY 属性
clientX和clientY与x,y一样的,以浏览器显示区域的左上角开始,指鼠标的坐标。x,y是新浏览器支持 offsetX,offsetY,针对目标元素的左上角坐标,从padding开始。 layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角 ...
这两个最主要的区别是 在有滚动条的情况下,pageX是不随滚动条变化而变化,clientx是在可视区域内的距离,不包括滚动条的距离。 screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议. offsetX和layerX offsetXIE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有...
2）screenX 和 screenY screenX 和 screenY 是事件发生时鼠标相对于屏幕的坐标，以设备屏幕的左上角为原点，事件发生时鼠标点击的地方即为该点的 screenX 和 screenY 值，如下所示：可以看到尽管浏览器窗口被缩到很小，但是坐标值却很大，因为是相对于屏幕坐标而不是浏览器的坐标。3）offsetX 和 offsetY 这...
offsetX、offsetY: 鼠标相对于事件源元素(srcElement)的X,Y坐标 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。 pageX、pagey: 类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没...