javascript - Mouse position and offset - Stack Overflow

admin管理员组

文章数量:1399466

I get mouse coordinates on some web page and save them.

$("div#container").mousemove( function(e) {
      client_x = e.pageX;
  client_y = e.pageY;

  // save x,y

});

Now other person load that same page and i want to show them the same coordinates (x,x position).

How can I get the same point if I have to take in consideration that the div#container is not at same position as it was in my browser (considering screen resolution and scroll)?

I get mouse coordinates on some web page and save them.

$("div#container").mousemove( function(e) {
      client_x = e.pageX;
  client_y = e.pageY;

  // save x,y

});

Now other person load that same page and i want to show them the same coordinates (x,x position).

How can I get the same point if I have to take in consideration that the div#container is not at same position as it was in my browser (considering screen resolution and scroll)?

• javascript
• jquery
• mousemove

Share Improve this question Follow asked Aug 27, 2012 at 13:05 GaleGale 3991313 silver badges2727 bronze badges 2

• Same point relative to #container or browser window? – David Hellsing Commented Aug 27, 2012 at 13:07
• I think is better relative to container, because container can move left, right if screens resolution change – Gale Commented Aug 27, 2012 at 13:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I would use $.offset().top and $.offset().left of the parent div container, and calculate the difference from that to the current X and Y coordinates of the mouse cursor.

.offset() always refers to the document and not to the parent of the element.

For example:

$('#element').mousemove(function(e){
    var client_x = e.pageX;
    var client_y = e.pageY;
    var elementOffset = $(this).offset();
    client_x -= elementOffset.left;
    client_y -= elementOffset.top;

    // save x, y.
});

Then, on the other users display, show the coordinates after adding them to his offsets.

This doesn't seem possible because of the variables you mentioned in the question. Screen resolution is the main reason, but, also, it depends on how big their window is. At first, you might think that you could pute the mouse's position relative to fixed points, like divs shown (take Stack Overflow, for example, where the main container of the site doesn't resize with the browser window). But if their window is smaller than the container, you would be making some false assumptions about what they see.

That being said, you can always just pute the mouse position relative to fixed elements you know will be on the screenusing $.offset() and just assume they have their screen showing everything (or check $(window) size) and are using "normal" viewing conditions.

You can use the values returned by offset(), in your example:

$("div#container").offset().left and $("div#container").offset().top

to substract them to e.pageXand e.pageY.

offset() function gives you the matched element's position relative to the document (see the docs), so there's no problem if the users scroll down.

Example: http://jsfiddle/3jMRS/

本文标签： javascriptMouse position and offsetStack Overflow