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＆amp; amp; 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并点击Y应该是0-200之间的数字，无论设备是什么

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

1 个答案: