clientX和 clientY 是可视区域的 x,y的坐标, 以浏览器左上角的x,y为起点为坐标系计算 image.png image.png offsetX、offsetY 事件触发相对于当前元素自身的位置的x,y坐标 image.png screenX、screenY 距离当前电脑屏幕的x,y坐标 (屏幕分辨率的宽度计算) image.png pageX、pageY 是相对于整个页面来说,包括了...
offsetX:鼠标点击位置相对于触发事件对象的水平距离 offsetY:鼠标点击位置相对于触发事件对象的垂直距离 Top~~ event.x event.x 代表点击的点距离可视区左边框的距离,而它在不同浏览器处理结果是不一样的,首先看以下代码 外内 这种情况,event.x在谷歌和IE结果是一样的,但是如果在外层div加上定位: 外内 这时候...
clientX和clientY与x,y一样的,都是客户区域坐标,指鼠标的坐标,以浏览器显示区域的左上角开始,x,y是新浏览器支持 以下截图打印的结果都是div2元素的左上顶点(从边框开始)的位置坐标。 offsetX,offsetY offsetX,offsetY 针对目标元素的左上角坐标(e.target),下面截图中鼠标点击有误差,不影响结果。 layerX,layer...
offsetX,offsetY:针对屏幕有效区域,及包含滚动条部分(相对于当前元素(块或行内块));当在有效区域内时,不包括滚动条部分 pageX,pageY:: 针对屏幕有效区域,及包含滚动条部分 layerX,layerY: 针对屏幕有效区域,及包含滚动条部分 screenX,screenY:可返回事件发生时鼠标指针相对于屏幕的水平坐标,不包括滚动条部分 效...
offsetX: 这个属性通常用于鼠标事件中的目标元素(即触发事件的元素),表示鼠标事件发生时,鼠标指针相对于目标元素的内边距框的横坐标位置。 pageX: 这个属性表示鼠标事件在整个页面文档中的横坐标位置,包括滚动条滚动的偏移量。它可以用于确定鼠标相对于整个文档的位置。
简介:我们在web前端项目中经常会使用到offsetX、 clientX、pageX、screenX、 layerX、x等变量,但是有的时候有搞不清楚他们之间的区别,甚至被搞得一头雾水。 我们在web前端项目中经常会使用到offsetX、 clientX、pageX、screenX、 layerX、x等变量,但是有的时候有搞不清楚他们之间的区别,甚至被搞得一头雾水。
offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点,也就是当...
offsetX属性也是一个只读属性，用于获取鼠标事件发生时，鼠标指针相对于触发事件的元素边界框左侧的距离。它提供了相对于事件目标元素左侧的鼠标位置信息。通常与事件处理函数一起使用，以获取鼠标在元素内部的相对位置。这两个属性在JavaScript中常用于处理与DOM元素交互的事件，特别是在处理拖拽、点击等操作时...
style.width/style.height与scrollWidth/scrollHeight是可读写的属性,clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性 style.width的值需要事先定义,否则取到的值为空。而且必须要定义在html里(内联样式),如果定义在css里,style.height的值仍然为空,但元素偏移有效;而offsetWidth则仍能取到。