// 当需求为获得的坐标值相对于box时

​

function positionBox(event, box) {

    var x, y;

    var e = event || window.event;

    var boxWidth = box.clientWidth;

    var boxHeight = box.clientHeight;

    x = e.clientX - box.offsetLeft;

    y = e.clientY - (box.offsetTop - box.offsetHeight/2);

    return {

        x: x,

        y: y

    }

}

​

function executeMove(event, box, point, dot) {

    var x = positionBox(event, box).x;

    var y = positionBox(event, box).y;

    // 获取盒子不计算边框的宽高

    var boxWidth = box.clientWidth;

    var boxHeight = box.clientHeight;

    var dotWidth = dot.offsetWidth;

    var dotHeight = dot.offsetHeight;

​

    // 边界距离

    var borderLeft = boxWidth - dotWidth;

    var borderTop = boxHeight - dotHeight;

​

    if(x >= borderLeft) {

        dot.style.left = borderLeft + 'px';

    } else if (y >= borderTop) {

        dot.style.top = borderTop + 'px';

    } else {

        dot.style.left = x + 'px';

        dot.style.top = y + 'px';

    }

​

    point.innerHTML = '(' + x + ', ' + y + ')';

}

​

window.onload = function () {

    var box = document.getElementById('box');

    var point = document.getElementById('point');

    var dot = document.getElementById('dot');

​

    if(box.attachEvent) {

        box.attachEvent('mousemove', function (event) {

            executeMove(event, box, point, dot);

        });

    } else {

        box.addEventListener('mousemove', function (event) {

            executeMove(event, box, point, dot);

        }, false);

    }

};