div内点击的位置答案

【问题标题】：Position of click within divdiv内点击的位置
【发布时间】：2014-09-15 19:19:16
【问题描述】：

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

谢谢。

【问题讨论】：

我讨厌这种问题。很大程度上取决于样式。查看offsetParent()api.jquery.com/offsetparent

标签： javascript jquery html mouseevent

【解决方案1】：

您在屏幕上有点击位置。然后你就有了 div 的位置。用 div 位置减去主位置，就得到手指相对于该 div 的位置。

$('#PopUpTitleBar').click(function (e) {
    var posX = $(this).offset().left, posY = $(this).offset().top;
    alert("e.pageX: " + e.pageX + " posX:" + posX + " e.pageY:" + e.pageY + " posY:" + posY);
});

【讨论】：

我试过这个...但 posX 和 posY 总是返回 0。我通过修改如下代码确定了这一点：$('#PopUpTitleBar').click(function (e) { var posX = $(this).position().left, posY = $(this).position().top; alert("e.pageX: " + e.pageX + " posX:" + posX + " e.pageY:" + e.pageY + " posY:" + posY); });
我刚刚编辑了我的答案。当我需要偏移时，我正在使用位置。现在试试吧，它应该像魅力一样工作；）。如果您觉得我的回答有用，请将其标记为以后搜索。

【解决方案2】：

要在 div 中获取点击位置的值，请在回调中使用事件 e 参数。

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

    if (firstClick == true) {
        // use $(e).target
        offsetX = $( $(e).target ).offset().left;
        offsetY =  $( $(e).target ).offset().top;
        firstClick = false;
    }

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

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

【讨论】：

这看起来很有希望，但我得到了很多：TypeError: 'undefined' is not an object (evaluating '$($(e).target).offset().left')

【解决方案3】：

这是最终奏效的：

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

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

【讨论】：