鼠标点击相对于父 div 左上角的坐标答案

【问题标题】：Mouse click coordinates relative to the parent div's top left corner鼠标点击相对于父 div 左上角的坐标
【发布时间】：2015-01-13 20:49:42
【问题描述】：

如何获取鼠标点击坐标相对于父 div 的左上角而不是浏览器视口的左上角？

示例：如果在下面的代码中点击#mydiv，如何获取相对于#mydiv左上角的坐标？

mydiv.onclick = function(e) { alert(e.clientX + ' ' + e.clientY); }

#blah { position: absolute; top:50px; left:60px; width: 1000px; height: 1000px; background-color: #F0F }

#mydiv { position: absolute; top:100px; left:100px; width: 100px; height: 100px; background-color: #FF0 }

&lt;div id="blah"&gt;&lt;div id="mydiv"&gt;Blah&lt;/div&gt;&lt;/div&gt;

已编辑（示例中有一个重大错误）。

【问题讨论】：

算出元素的偏移量，就很简单了。
@MarcB 是的，但是我们是否必须递归遍历所有父、祖父、祖父 div 并添加它们的偏移量？这会是一个非常干净的解决方案吗？
请提供你的小提琴???
@AshishMishra 我贴了一个 StackOverflow 代码 sn-p，它类似于 jsfiddle
stackoverflow.com/questions/2159044/…

标签： javascript html

【解决方案1】：

下面是我的代码，很抱歉使用 JQuery：但它给出了父元素相对于#mydiv 的坐标。

$('#mydiv').on('click', function(e) { 
    var offs = $('#mydiv').offset();
    alert((e.clientX - offs.left) + ' ' + (e.clientY - offs.top)); 
});

【讨论】：

【解决方案2】：

试试看：

mydiv.onclick = function(e) { 
    var offsets =element_offsets(this.parentNode);
    alert(e.clientX-offsets.left);
    alert(e.clientY-offsets.top);
}


function element_offsets(e) {
    var left = 0, top = 0;
    do {
        left += e.offsetLeft;
        top += e.offsetTop;
    } while (e = e.offsetParent);
    return { left: left, top: top };
}

【讨论】：

它不起作用（你可以在我的例子中尝试）因为它没有添加每个父/祖父母/祖父母div的每个偏移量
啊好吧，我不知道它可能有祖父母。我修复了添加每个偏移量的答案。

【解决方案3】：

查看此页面中的脚本和示例：

http://coursesweb.net/javascript/get-mouse-coordinates-inside-div-image_s2

【讨论】：

我认为如果有一个带有偏移量的div 在另一个带有偏移量的div 中，这将不起作用：我们应该将所有偏移量相加，不是吗？