javascript - div 的偏移量在不同的浏览器、屏幕分辨率、设备等方面是否相同？

Question

假设我在网页上有一个框，它只是一个 div样式使用 border: 1px solid black;高度和宽度均为 200px。

我有 2 个用户，一个在笔记本电脑上使用谷歌浏览器，另一个在使用 iPad，可能这些设备的屏幕分辨率不同，等等。

用户 1 在他的 google chrome 上点击框的中心。然后用户 2 在他的 iPad 上点击完全相同的位置。

我想用代码确定用户是否都单击了同一个位置。我想如果我试图获取鼠标坐标，甚至是 top, left等等，即使用户 1 和 2 都单击了框上完全相同的位置，它们也会有所不同，因为它们的屏幕分辨率等不同。

我使用了以下 HTML:

Click anywhere in the box
<br />
<div style="border:1px solid black; min-height: 100px; min-width: 100px; 
             display: inline-block;" id="parent">
    <span style="margin-top:40px; margin-left:40px; position: absolute;
                  cursor: pointer;" id="clickMe">X</span>

</div>
<br />
<div id="result"></div>

和以下脚本:

$(document).ready(function () {
    $("#parent").click(function (e) {
        showEvent(e);
    });
});

function showEvent(e) {
    var props = ['offsetX', 'offsetY', 'pageX', 'pageY', 'screenX', 'screenY'];

    var result = '';

    for (var i = 0; i < props.length; i++) {
        result += "<b>" + props[i] + "</b>:";
        result += e[props[i]] + "<br />";
    }

    $("#result").html(result);
}

这是 jsFiddle

我在 google chrome 和 ff 中尝试了上面的方法，当我点击中间的 X 时我得到了不同的值。

我该如何解决这个问题？有没有办法获取 div 的单击部分相对于 div 而不是整个窗口的偏移量？ (例如，在这种情况下，div 的中心将为 100，因此如果用户同时单击左侧 100px 和顶部 100px，他们将单击同一位置)。

有什么想法吗？

Answer 1

$('#myDiv').mousedown(function(event){
 var clickX = event.pageX - $('#myDiv').offset().left;
 var clickY = event.pageY - $('#myDiv').offset().top;

无论设备如何，clickX 和 clickY 都应该是 0-200 之间的数字