文章目录
1、clientX 、clientY
document.onclick = function (event){
var clientX = event.clientX;
var clientY = event.clientY;
}
这里的clientX和clientY是鼠标点击事件中点击的那个点在浏览器中的坐标
2、pageX、pageY
event.pageX 属性返回鼠标指针的位置,相对于文档的左边缘。
注意: clientX和pageX的区别
pageY = clientY + 纵向滚动条滚动的距离
clientX是相对于可视化窗口的坐标,即使有滚动条,即使滚动条滚动,在窗口(可视化窗口)相同的位置单击,坐标不变。
pageX的大小是可以根据滚动条的宽而变化,不仅仅是可视化窗口的坐标。
例子:对document添加点击事件,点击某一个位置(滚动条未滚动):
点击某一个位置(滚动条滚动了):
3、offsetX、offsetY
相对于所点击的元素的左上角的位置
例子:已知下方div的左外边距和上外边距都是100px,对于此div添加点击事件,结果如下:
4、screenX、screenY
screenX 鼠标事件属性
当触发事件时,screenX属性返回鼠标指针的水平坐标(根据用户计算机屏幕,而不是浏览器窗口)。
最右边为0,往左为负值
使用screenLeft和screenTop for IE8及更早版本
5、offsetWidth、offsetHeight 、offsetLeft、offsetTop
offsetWidth = width + 左右padding + 左右boder
offsetHeith = height + 上下padding + 上下boder
offsetLeft:当前元素 左边框 外边缘 到 最近的已定位父级(offsetParent) 左边框 内边缘的 距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离。
offsetTop:当前元素 上边框 外边缘 到 最近的已定位父级(offsetParent) 上边框 内边缘的 距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离
6、clientWidth、clientHeight、clientLeft、clientTop
clientWidth = width + 左右padding
clientHeigh = height + 上下padding
clientLeft 属性返回元素左边框的宽度(border)。此属性不包括元素的左margin或左padding 。此属性是只读的。
提示:您还可以使用style.borderLeftWidth属性返回元素左边框的宽度。
clientTop属性返回元素顶部边框的宽度。此属性不包括元素的顶部填充或上边距。此属性是只读的。
提示:您还可以使用style.borderTopWidth属性返回元素顶部边框的宽度。
总结
offsetWidth = 100px(width) + 20px(左右padding) + 20px(左右border) = 140px;
clientWidth = 100px(width) + 20px(左右padding) = 120px;