3

Say I have a box on a web page, which is simply a div styled using border: 1px solid black; with a height and width of 200px.

I have 2 users, one is using google chrome on a laptop, the other is using an IPad, likely the devices have different screen resolutions, etc.

User 1 clicks in the center of the box on his google chrome. Then user 2 clicks the exact same spot on his IPad.

I want to determine in code if the users both clicked the same spot or not. I think if I tried to get the mouse coordinates, or even the top, left etc, they will be different for User 1 and 2 even if they both clicked the exact same spot on the box, because their screen resolutions etc are different.

I used the following 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>

and the following Script:

$(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);
}

Here is the jsFiddle

I tried the above in google chrome & ff, and I get different values when i click the X in the center.

How can I resolve this? Is there a way to get the offset of the clicked part of the div relative to just the div and not the whole window? (E.g in this case the center of the div would be 100, so if the users both click 100px left and 100px top, they'd have clicked the same spot).

Any ideas?

Ali
  • 261,656
  • 265
  • 575
  • 769
  • any reason for the downvote? – Ali May 30 '13 at 22:05
  • 2
    I removed the offset tag as this question does not seem to be in relation to a file or byte buffer. Also if you say `I think if I tried to get the mouse coordinates, or even the top, left etc, they will be different for User 1 and 2 even if they both clicked the exact same spot on the box, because their screen resolutions etc are different.` Have you tried this and seen the result or are you assuming the result? If you are assuming it how can you ask to resolve what you don't yet know is an issue? I'm merely asking because of the way this part in the question is phrased. – Nope May 30 '13 at 22:15
  • 1
    I'm not sure this will satisfy your requirements, but you might consider using jQuery's `position` instead of `offset`. `Position` returns coordinates relative to the parent, `offset` returns coordinates relative to the document. http://stackoverflow.com/questions/3202008/jquery-difference-between-position-and-offset – showdev May 30 '13 at 22:16
  • 1
    jQuery should handle the differences under the hood, but I know firsthand that native event object offsets are different on iOS devices, presumably others as well. – landons May 30 '13 at 22:18
  • 1
    @showdev `.position()` returns coordinates of an element relative to its first non-static ancestor. That doesn't always mean its immediate parent. Just saying – Ian May 30 '13 at 22:19
  • 2
    I think all those assumptions and educated guesses are great and most likely correct but I think bottom line is OP should [**probably check with either a jsFiddle or similar**](http://whathaveyoutried.com) what the actual results are and then come back with any issue found. jQuery should be able to deal with any differences but only a test in combination with jQuery documentation on the functions will show the actual results. – Nope May 30 '13 at 22:21
  • I thought it'd be straight forward to see that this would be a problem on different screen resolutions without needing to spend an hour writing a test for it, but anyway, I've made a jsfiddle to test it. http://jsfiddle.net/u9rdB/ I've tried it in google chrome & ff, and I get different values when i click the X in the center. – Ali May 30 '13 at 22:45
  • 1
    @ClickUpvote: The fiddle is great to get started on trying to work how to fix this and therefore well worth the effort. I have added the link to the fiddle for completeness to the question itself. I also added the actual code from the fiddle to ensure the code is available should jsFiddle be down or the link go dead for some reason. – Nope May 30 '13 at 22:56

1 Answers1

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

clickX and clickY should be a number from 0-200 regardless of the device

Curtis
  • 2,486
  • 5
  • 40
  • 44
  • Doesn't work. http://jsfiddle.net/u9rdB/1/ I get different values when I click the X in firefox & chrome – Ali May 30 '13 at 22:51
  • Strangely, I seem to get the right results when I try it without jsFiddle. – Ali May 30 '13 at 22:59
  • Well I get the same values in both browsers and on iPad, maybe off by a couple pixels depending on where on the X you click – Curtis May 30 '13 at 23:01