[js] 元素随着鼠标移动（在父div下）

    <div>
        <p></p>
    </div>

 * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 5000px;
        }

        div {
            width: 300px;
            height: 300px;
            border: 20px solid #000;
            margin: 50px auto;
            position: relative;
        }

        p {
            width: 50px;
            height: 50px;
            background: pink;
            position: absolute;
            top: 0;
            left: 0;
        }

        // 获取标签对象
        var oDiv = document.querySelector('div');
        var oP = document.querySelector('p');

        // 父级标签 和 页面的间距
        var oDivLeft = oDiv.offsetLeft;
        var oDivTop = oDiv.offsetTop;

        // 父级标签 边框线宽度
        var oDivBorderLeft = oDiv.clientLeft;
        var oDivBorderTop = oDiv.clientTop;

        // 父级标签占位 内容+padding
        var oDivWidth = oDiv.clientWidth;
        var oDivHeight = oDiv.clientHeight;

        // 获取标签占位 内容+padding+border
        var oPWidth = oP.offsetWidth;
        var oPHeight = oP.offsetHeight;

        // 给div添加点击事件
        oDiv.addEventListener('click', function (e) {
            // 计算 p标签定位的数据
            // 定位数值 = 鼠标点击坐标 - 父级左侧间距 - 父级左侧边框线宽度 - 定位标签占位/2
            var x = e.pageX - oDivLeft - oDivBorderLeft - oPWidth / 2;
            var y = e.pageY - oDivTop - oDivBorderTop - oPHeight / 2;

            // 极值的判断

            // 最小值是0
            x = x < 0 ? 0 : x;
            y = y < 0 ? 0 : y;

            // 最大值 父级占位(内容+padding) - 定位标签占位(内容+padding+border)
            x = x > oDivWidth - oPWidth ? oDivWidth - oPWidth : x;
            y = y > oDivHeight - oPHeight ? oDivHeight - oPHeight : y;

            // 将结果赋值给 定位标签 定位属性
            oP.style.left = x + 'px';
            oP.style.top = y + 'px';

        })