04 鼠标行为坐标系 pageX/Y封装 拖拽函数封装

鼠标行为->坐标系

1. clientX/Y:鼠标相对浏览器可视区域的坐标。不包含滚动条
2. layerX/Y 同pageX/Y相同 IE11以下和clientX/Y相同
3. screenX/Y 鼠标相对于屏幕的坐标
4. x/y 和clientX/Y相同。火狐不支持。鼠标位置相对于当前可视区域的坐标。不包含滚动条。
5. pageX/pageY 鼠标相对于文档的坐标，包括滚动条的距离。IE9以下不支持
6. offsetX/Y 鼠标相对于块元素的坐标 包含边框 safari 不包含边框。

封装

1. 鼠标在文档中的位置。 ```javascript /**
   • 获取鼠标在文档中的位置
   • 相对于客户端的距离+滚动的距离-文档偏移量
   • @param {Event 对象} e
   • @returns 鼠标在文档中的位置 */ function pagePos(e) { var e = e || window.event, sLeft = getScrollOffset().x,//滚动条横轴滚动距离 sTop = getScrollOffset().y,//滚动条纵轴滚动距离 clientX = e.clientX,//相对于浏览器可视窗口的横轴距离 clientY = e.clientY,//相对于浏览器可视窗口的纵轴距离 cLeft = document.documentElement.clientLeft || 0,//文档偏移量 cTop = document.documentElement.clientTop || 0//文档偏移量 return { x: clientX + sLeft - cLeft, y: clientY + sTop - cTop } }

拖拽<br /> mousedown + mousemove +mouseup = drag;<br />封装
```javascript
/**
 * 
 * @param {Event } e
 * 阻止事件冒泡 
 */
function cancelBubble(e) {
    var e = e || window.e;
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
}
/**
 * 
 * @param {Event} e
 * 阻止默认事件 
 */
function preventDefault(e) {
    var e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

/**
 * 拖拽事件简单封装
 * @param {Element 元素} elem 
 */
function dragEvent(elem) {
    var x,
        y,
        //元素宽度
        eleWidth = parseInt(getStyle(elem, 'width')),
        //元素高度
        eleHeight = parseInt(getStyle(elem, 'height')),
        // 文档宽高对象
        doc = getDocHeight();
        // 添加鼠标按下事件。
        addEvent(elem,'mousedown',function (e) {
            var e = e || window.event,
                //元素初始位置的left
                eleOrignLeft = parseInt(getStyle(elem, 'left')),
                //元素初始位置的top
                eleOriginTop = parseInt(getStyle(elem, 'top'));
                // 鼠标位置相对elem 左上角x的距离
                x = mousePos(e).x - eleOrignLeft;
                // 鼠标位置相对elem 左上角y的距离
                y = mousePos(e).y - eleOriginTop;
            // 添加鼠标移动事件
            addEvent(document, 'mousemove', mouseMove);
            // 添加鼠标抬起事件
            addEvent(document, 'mouseup', mouseUp);
            // 阻止事件冒泡
            cancelBubble(e);
            // 阻止事件默认事件
            preventDefault(e);
        })
        function mouseMove(e) {
            var e = e || window.e,
                //鼠标点击的位置
                evPos = mousePos(e),
                // 鼠标相对于文档的位置 - 鼠标相对于元素左上角的位置 
                eleLeft = evPos.x - x,
                eleTop = evPos.y - y;
            if (eleLeft <= 0) {
                eleLeft = 0;
            } else if (eleLeft >= (doc.width - eleWidth)) {
                //右边的距离超出了文档宽度减去 元素宽度
                eleLeft = doc.width - eleWidth;
            }
            if (eleTop <= 0) {
                eleTop = 0;
            } else if (eleTop >= (doc.height - eleHeight)) {
                //高度超出了文档高度减去 元素高度
                eleTop = doc.height - eleHeight;
            }
            elem.style.left = eleLeft+ 'px';
            elem.style.top  = eleTop  + 'px';
        }
        function mouseUp(e) {
            removeEvent(document, 'mouseup', mouseUp);
            removeEvent(document, 'mousemove', mouseMove);
        }
}