Is there a way to trigger mousemove and get event.pageX, event.pageY?

Question

So, like the question specifies, is there a way to trigger a mousemove event in jQuery which also sends the mouse coordinates to the event Object?

So far my code can trigger the mousemove using the .trigger(event) function but the event.pageX and event.pageY are undefined.

Answer 1

You need to set pageX and pageY directly before triggering the event. To set these properties, make a jQuery.Event object.

// create a jQuery event
e = $.Event('mousemove');

// set coordinates
e.pageX = 100;
e.pageY = 100;

// trigger event - must trigger on document
$(document).trigger(e);

See it in jsFiddle.

Answer 2

I don't believe it possible to get the mouse coordinates on demand via JavaScript / jQuery; however if you bind the position to a global var you can then access them at anytime throughout the document like this:

$(document).ready(function(){
   $().mousemove(function(e){
      window.xPos = e.pageX;
      window.yPos = e.pageY;
   }); 
});

for a less CPU intensive option, you can add a timeout, although you trade performance for a slight delay in knowing where the mouse is:

function getMousePosition(timeoutMilliSeconds) {
    $(document).one("mousemove", function (event) {
        window.xPos = event.pageX;
        window.yPos = event.pageY;
        setTimeout("getMousePosition(" + timeoutMilliSeconds + ")", timeoutMilliSeconds);
    });
}
getMousePosition(100);

You should now be able to access the window.xPos and window.yPos from anywhere in the document using either solution without needing to trigger a faux event.

Answer 3

Think I know your problem. You're trying to query the mouse position programmatically. Perhaps you have code something like this:

$(document).one('mousemove.myModule', function (e) {
    // e.pageY and e.pageX is undefined.
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX); }
        ).trigger('mousemove.myModule');

Then you're absolutely right. The properties pageY and pageX on the event object won't be defined. Actually, there's a hole lot of stuff in the event object that won't be there, not just .pageY and .pageX. Could be some bug in jQuery. Anyways, just don't chain that call to trigger and trigger the event on $(window) instead. Don't ask me why it works though but for me it did:

$(document).one('mousemove.myModule', function (e) {
    console.log('e.pageY: ' + e.pageY + ', e.pageX: ' + e.pageX); } );

// Now e.pageY and e.pageX will be defined!
$(window).trigger('mousemove.myModule');

Answer 4

This is the best I could come up with, that doesn't inolve you setting global variables. The click event will still capture the coordinates, so you can pass that event to your mousemove.

$(element).click(function(e){
  $(element).trigger('mousemove',e);
});

Then, that event object will be the second argument in your mousemove function; the first being either the actual mousemove event or the jQuery created event.

$(element).mousemove(function(e,clickEvent){
  if typeof e.pageX === 'undefined' e = clickEvent;
  // or if you prefer, clickEvent.pageX;
});

Answer 5

I'm not sure I fully understand the question. You can do:

$('.someClass').mousemove(function(event){
    console.log(event.pageX);
    console.log(event.pageY);
});

Now, whenever the mouse moves over someClass, it will register the xy cordinates. Here's the jsfiddle to see it in action and the jquery documentation.

Answer 6

You cannot move a mouse if that is what you're asking. But you could call a function with whatever context and arguments you want. E.g.:

function foobar(e)
{
  this.className = 'whatever'; // this == element
}

someElement.onmousemove = foobar;

var obj = {whatever:'you want'};
foobar.call(someElement, obj); // calls foobar(obj) in context of someElement