3

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

我有 2 个用户，一个在笔记本电脑上使用 google chrome，另一个在使用 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，他们会点击同一个位置）。

有任何想法吗？

4

1 回答 1

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

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

于 2013-05-30T22:31:51.837 回答