javascript - div 内的点击位置

Question

我正在尝试获取 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 的左上角内 Angular ？

谢谢。

Answer 1

这就是最终有效的方法:

    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';
    }

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