在不同的浏览器、屏幕分辨率、设备等中，div的偏移量是否相同?

Question

假设我在一个网页上有一个简单的div样式，使用border: 1px solid black;，高度和宽度分别为200px。

我有两个用户，一个在笔记本电脑上使用谷歌浏览器，另一个使用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 &当我点击中间的X时，我得到了不同的值。

如何解决这个问题?是否有一种方法来获得相对于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之间的数字，与设备无关