比如event.offsetX,event.clientX,event.pageX,event.screenX等等。现在我们来解析一下这些坐标属性的区别。HTML代码: 1 2CSS代码: .box{ width: 200px; height: 200px; backgro 详细区分DOM事件中鼠标指针的坐标问题 前面博客中我们讲解到了DOM事件的event对象,里边包含了鼠标事件的指针坐标属性。比如event.offs...
offsetLeft: 对象相对于版面或由 offsetParent 左侧位置 offsetTop:对象相对于版面或由 offsetTop 顶端位置 clientX: 相对文档的水平坐标 clientY: 相对文档的垂直坐标 clientWidth:相对文档的宽度(可见部分的宽度) clientHeight:相对文档的高度 event.offsetX: 相对容器的水平坐标 event.offsetY : 相对容器的垂直坐标...
这些属性包括clientX、offsetX、pageX和screenX,它们各自表示不同的坐标信息: clientX: 这个属性表示鼠标事件在浏览器窗口内的客户区域的横坐标位置。客户区域是指浏览器窗口中除去滚动条的区域,通常是用户可见的页面区域。 offsetX: 这个属性通常用于鼠标事件中的目标元素(即触发事件的元素),表示鼠标事件发生时,鼠标指针...
offsetX与clientX最大区别是offset的坐标相对于父对象而言的坐标 转http://guigang520.blog.163.com/blog/static/90814934201031851720479/
offset意为偏移量,是被点击的元素距左上角为参考原点的长度,而IE、FF和Chrome的参考点有所差异。 Chrome下,offsetX offsetY是包含边框的,如图所示。 而IE、FF是不包含边框的,如果鼠标进入到border区域,为返回负值,如图所示。 clientX,clientY 设置或获取鼠标指针位置相对于浏览器视口(内容区域的左上角)的坐标,与...
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。event.offsetX、event.offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。event.screenX、event....
“ClientX”和“OffsetX”的主要区别：ClientX： 是一个Web浏览器提供的属性，通常在处理JavaScript事件时如鼠标点击事件中使用。它表示事件触发时鼠标指针相对于浏览器窗口的X坐标位置。换句话说，它是从浏览器窗口的左上角开始计算的鼠标位置。这对于获取用户在页面上的点击位置非常有...
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说,我给黄色的盒子定义一个点击事件,则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。 pageX、pageY: 事件发生时鼠标相对于整个页面的坐标。整个页面是...
一、clientX、clientY 点击位置距离当前body可视区域的x,y坐标 二、pageX、pageY 对于整个页面来说,包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x,y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x,y坐标 五、x、y ...