offsetX,offsetY,针对目标元素的左上角坐标,从padding开始。 layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角 pageX,pageY相对页面左上角的距离 screenX screenY 相对屏幕左上角的位置...
clientX和 clientY 是可视区域的 x,y的坐标, 以浏览器左上角的x,y为起点为坐标系计算 image.png image.png offsetX、offsetY 事件触发相对于当前元素自身的位置的x,y坐标 image.png screenX、screenY 距离当前电脑屏幕的x,y坐标 (屏幕分辨率的宽度计算) image.png pageX、pageY 是相对于整个页面来说,包括了...
当我的鼠标移动到div的右下角的时候,screeX是200px,screenY是185px,因为div本身的宽度我定义的时200px,高度100px; 接下来说一说offsetX和offsetY属性 offsetX :当鼠标事件发生时,鼠标相对于事件源x轴的位置 offsetY:当鼠标事件发生时,鼠标相对于事件源y轴的位置 当我们点击test按钮的时候触发onclick事件,这里t...
接下来说一说offsetX和offsetY属性 offsetX :当鼠标事件发生时,鼠标相对于事件源x轴的位置 offsetY:当鼠标事件发生时,鼠标相对于事件源y轴的位置 当我们点击test按钮的时候触发onclick事件,这里test这个按钮就是事件源,所以通过offsetX和offsetY获取的坐标值就是相对于 test按钮这个事件源的; Test按钮自身的宽100px...
鼠标位置 page:pageX、pageY,当前鼠标距离页面的横纵坐标 client: clientX、clientY,鼠标相对于视口的坐标 offset:offsetX、offsetY,鼠标相对于事件源 padding-box 的坐标 screen: screenX、screenY,鼠标相对于屏幕
javascript 中 x offsetX clientX screenX pageX的区别 ,clientYpageX, pageY是相对于文档窗口的左上角,x,y和clientX,clientY相同,其值是相对于可视窗口(浏览的可视区域)的左上角。如下图。 此时可视窗口与文档窗口重叠,pageX等于clientX, pageY等于clientY, 如果我们缩小浏览器窗口直到浏览器出现滚动条。此时可视窗...
在上图中,我们点击了这个正方形DOM元素,那么它的offsetX就是距离这个正方形元素左侧的距离,而offsetY就是距离正方形上侧的距离,它的clientX就是距离浏览器左侧的距离,clientY就是距离浏览器上侧的距离,它的screenX就是距离它整个屏幕左侧的距离,它的screenY就是距离它整个屏幕上侧的距离。
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性,所以必然是“鼠标事件”发生时候才会有意义; clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等), ...
pageX/Y pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 offsetX/Y offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。
offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左上角为基准点。 兼容性:IE所有版本,chrome,Safari均完美支持,Firefox不支持 ...