Get mouse position when focus/blur events are fired?

Question

I'm using jQuery to capture an event:

$('input').focus(function(e){

    console.log( e.pageX, e.pageY );

});

This doesn't seem to work... any ideas on alternative ways to getting the mouse position?

Help would be great.

I think you can only get the mouse coordinates on events that use the mouse -- click, dblclick, etc. It would be meaningless to get the mouse coordinates if a user focuses on your input by tabbing with the keyboard. — Blazemonger, Nov 02 '11 at 17:34

score 8 · Accepted Answer · answered Nov 02 '11 at 17:35

8

You can only get mouse coordinates using mouse events. If you want to capture the position of the mouse, you can use a global mousemove event listener, and store the coordinates in a set of variables, which can later be accessed by the focus function. Example:

var pageX, pageY; //Declare these globally
$(window).mousemove(function(e){
    pagex = e.pageX;
    pageY = e.pageY;
});

$('input').focus(function(){
    console.log(pageX, pageY); // These variables have been defined by the global
                               //  mousemove event
});

answered Nov 02 '11 at 17:35

Rob W

341,306
83
791
678

This is the only way to do it, afaik – Ruan Mendes Nov 02 '11 at 17:36
Did they mean any [mouse] event here?? ".pageX and .pageY can be read off of any event, not just .mousemove(). For example, perhaps you want to know exactly where a user clicked inside a particular div: Here's an example where we listen for a click event inside a particular div called #special." http://docs.jquery.com/Tutorials:Mouse_Position – jbabey Nov 02 '11 at 17:37
@jbabey A click is a mouse event. `focus` is not a mouse event. – Rob W Nov 02 '11 at 17:39
@RobW right I understand and I agree with you - it's just strange that the site I linked above says "any event" instead of "any mouse event" – jbabey Nov 02 '11 at 17:40
@Andy I originally wanted to use `x` and `y` too. Then, I thought "It is very likely that x or y are already defined within a function, causing conflicts." Hence, I decided to use the descriptive yet compact `pageX` and `pageY` variable names. – Rob W Nov 02 '11 at 17:43
@RobW I'm notorious among my coworkers for my descriptive variable names :) – Andy Nov 02 '11 at 18:01

score 2 · Answer 2 · answered Nov 02 '11 at 17:37

2

If you're trying to get the position relative to the element, try something like this instead:

$("input").focus(function(e){
    var relativeX = e.pageX - this.offsetLeft;
    var relativeY = e.pageY - this.offsetTop;
});

answered Nov 02 '11 at 17:37

James Johnson

45,496
8
73
110

Get mouse position when focus/blur events are fired?

2 Answers2

Linked