0

when i call a function, i get: window.event.clientX and window.event.clientY from a global function, paste.

Im trying to paste at the coordinates, but they are off by some info i am working to resolve.

i was just going to take:

window_data:  {top,left}

and substract:

stage_div_offset:  {top,left}

to get the actual offset but that seems to also be off by a bit. Around 40 pixels in both X and Y directions. I assumed this is due to maybe margin or padding or something like that.

What i was really curious of is, Is there a way to get the X and Y of the mouse in reference to a div or other htmlElement?

I wasnt sure if there was a function which i could pass in a selector, or if using something like jquery, there would actually be a function or something for the selector called: mouse.

I do feel this following Topic is relevant, though not sure if it makes mine a dup:
jQuery get mouse position within an element

Edit: Originally i was doing the following code:

var stage = $("#stage").offset(),
    results = { 
        left: window.event.clientX - stage.left, 
        top: window.event.clientY - stage.top 
    };

Edit 2: none of the current answers seem to be working, partially because my browser is not recognizing the mouseEvent, so it cant get the screens location.

I wrote the following to try to get the mouselocation

var MouseLocation = {};
MouseLocation.Left = 0;
MouseLocation.Top = 0;
MouseLocation._event;
MouseLocation.get_position = function () { return { left: MouseLocation.Left, top: MouseLocation.Top }; }
MouseLocation.attach = function () {
    MouseLocation._event = function (e) {
        var loc = { left: e.clientX, top: e.clientY }
        MouseLocation.Left = loc.left;
        MouseLocation.Top = loc.top;
    };
    $("#stage").on("mousemove", MouseLocation._event);
}
MouseLocation.detach = function () {
    $("#stage").off("mousemove", MouseLocation._event);
}
MouseLocation.ping = function () {
    MouseLocation.attach();
    $("#stage").mousemove();
    MouseLocation.detach();
}

so that way, inside of my event, i can just say:

MouseLocation.ping(); MouseLocation.get_position();

but it doesnt seem to like: $("#stage").on("mousemove")

Community
  • 1
  • 1
Fallenreaper
  • 10,222
  • 12
  • 66
  • 129

2 Answers2

2

You can use postion() to:

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • I added some code. Right now, i was just subracting the of stage.offset() from event.client*. Are you saying that instead i should do event.client* - {stage.parent().offset() + stage.position()} – Fallenreaper May 28 '14 at 11:48
  • It seems that one of the issues im having at the moment is that when i paste, it doesnt recognize what: window.event.clientX etc is. Am i missing something? Right now, I click and copy, but im just trying to get the coords of whereever the position of the mouse is. It seems like when i do paste, it cant find my mouse or something. I think it is because event is being used for click stuff, so a lot of the things related to the mouse is 0 or undefined. – Fallenreaper May 28 '14 at 12:00
  • @RodringoDela above was making not that offset accounts for padding, margin, borders, etc. Im thinking the deviation might be related to that, but i cant find much more – Fallenreaper May 28 '14 at 12:02
0

You can just take the document coordinates of the mouse and substract the coordinates of the element:

relX = e.clientX-element.offset().left;
relY = e.clientY-element.offset().top;

http://jsfiddle.net/4scbu/1/

The advantage to offset() is that margin and paddings are included into the calculations.

RodrigoDela
  • 1,706
  • 12
  • 26