div 内的点击位置

我试图获取 div 内单击的位置，以便当我在鼠标拖动移动窗口时定位窗口时，鼠标光标将恰好位于初始单击发生的位置（相对于移动窗口）。

这是窗口：

<div id="PopUp" class="Popup">
  <div id="PopUpTitleBar"><img class="xOut" onclick="ClosePopUp();" src="/images/xOut.png"></div>
  <div class="InnerPopup">
    <!-- <p>Here is the body of a pop up element.</p> -->
    <p id="PopUpBody"></p>
  </div>
</div>

我有这些方法来处理单击和拖动：

    var firstClick = true;
    var offsetX = 0;
    var offsetY = 0;

    function mouseUp()
    {
        window.removeEventListener('mousemove', divMove, true);
        firstClick = true;
    }

    function mouseDown(e){
        window.addEventListener('mousemove', divMove, true);
    }

    function divMove(e){
        var div = document.getElementById('PopUp');

        if (firstClick == true) {
            offsetX = $('#PopUpTitleBar').offset().left;
            offsetY = $('#PopUpTitleBar').offset().top;
            firstClick = false;
        }

        var spotX = e.pageX - offsetX;
        var spotY = e.pageY - offsetY;

        div.style.top = spotY + 'px';
        div.style.left = spotX + 'px';
    }

这种方法有效，只是我的 offsetX 和 offsetY 返回的是 PopUpTitleBar 左上角的位置，而不是 PopUpTitleBar 中的单击位置。

我该如何纠正这个问题，以便我的偏移量相对于 PopUpTitleBar 的左上角内角？

Thanks.

这就是最终起作用的：

    function divMove(e){
        var div = document.getElementById('PopUp');
        var titleBar = document.getElementById('PopUpTitleBar');

        if (firstClick == true) {
            offsetX = e.pageX - $('#PopUpTitleBar').offset().left;
            offsetY = e.pageY - $('#PopUpTitleBar').offset().top;
            firstClick = false;
        }

        var spotX = e.pageX - offsetX;
        var spotY = e.pageY - offsetY;

        div.style.top = spotY + 'px';
        div.style.left = spotX + 'px';
    }

首先，我通过从第一次单击发生的点减去标题栏的左上角来计算标题栏中的位置。然后，当鼠标移动时，鼠标的后续位置必须全部减去该偏移量，以便左上角与原始单击的距离保持相同。感谢大家的建议——他们帮助我更好地解决了这个问题。