九、鼠标行为坐标系、pageXY封装、拖拽函数封装

九、鼠标行为坐标系、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