九、鼠标行为坐标系、pageXY封装、拖拽函数封装
一、鼠标行为坐标系
事件对象e的一些属性值代表了此时鼠标行为的坐标:
clientX/Y 鼠标位置相对于当前可视区域的坐标(不包括滚动条的距离)
x/y 同clientX/Y相同,火狐不支持
screenX/Y 鼠标位置相对于设备屏幕的坐标
pageX/pageY 鼠标位置相对于当前文档的坐标(包括滚动条ie9以下不支持)
layerX/Y 同pageX/pageY相同,IE11以下同clientX/Y
offsetX/y 鼠标相对于块元素的坐标,左上角为0(包括边框,safari不包括边框)
注:加粗代表重要。pageX/pageY很常用,需要我们考虑兼容性。
二、pageXY封装
问:clientX/Y + 滚动条距离 == pageX/Y ?
答:错,因为文档有偏移距离margin
正确答案:clientX/Y + 滚动条距离 - 文档偏移距离 == pageX/Y
// 封装相对于当前文档的鼠标位置坐标
function pagePos(e){
// 获取滚动条距离,文档偏移量
// 有些浏览器的文档是有偏移量的,有些没有
var sLeft = getScrollOffset().left,
sTop = getScrollOffset().top,
cLeft = document.documentElement.clientLeft || 0, //ie8 以上可能为 undefined
cTop = document.documentElement.clientTop || 0,
// 鼠标距离文档的可视距离 + 滚动条距离 - 文档偏移距离
return {
X: e.clientX + sLeft - cLeft,
Y: e.clientY + sTop - cTop
}
}
// 滚动距离与高度的兼容性写法
function getScrollOffset(){
if(window.pageXOffset){
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}else{
return {
left: document.body.scrollLeft