Getting mouse position in keyboard event

Question

I am trying to create a selection wheel when the user holds the Shift key.

The wheel should be centered in the mouse position.

However, when I test this, pageX and clientX are undefined for the event object.

Is it possible to get mouse coordinates on a keyboard event?

Answer 1

No, just keep track of mousemove events and keep your current position constantly if you get a keyboard event.

Answer 2

Specify the position of the mouse in the global variable in each mousemove event and use it when the key event fires:

 var mousePosition = {x:0, y:0}; $(document).bind('mousemove',function(mouseMoveEvent){ mousePosition.x = mouseMoveEvent.pageX; mousePosition.y = mouseMoveEvent.pageY; }); $(document).bind('keyup', function(keyUpEvent){ $('body').append($('<p/>').text('x:' + mousePosition.x + ' * y: ' + mousePosition.y)); }); 

JSBIN: http://jsbin.com/uxecuj/4

JavaScript without jQuery:

 var mousePosition = {x:0, y:0}; document.addEventListener('mousemove', function(mouseMoveEvent){ mousePosition.x = mouseMoveEvent.pageX; mousePosition.y = mouseMoveEvent.pageY; }, false); document.addEventListener('keyup', function(keyUpEvent){ var divLog = document.querySelector('#log'), log = 'x:' + mousePosition.x + ' * y: ' + mousePosition.y, p = document.createElement('p').innerHTM = log; divLog.appendChild(p); }, false); 

Answer 3

Here is the POJS equivalent of other answers that cross-reference IE 6 (and probably IE 5, but I don't have it anymore). No global variables:

 function addEvent(el, evt, fn) { if (el.addEventListener) { el.addEventListener(evt, fn, false); } else if (el.attachEvent) { el.attachEvent('on' + evt, fn); } } (function () { var x, y; window.onload = function() { addEvent(document.body, 'mousemove', function(e) { // Support IE event model e = e || window.event; x = e.pageX || e.clientX; y = e.pageY || e.clientY; }); // Show coords, assume element with id "d0" exists addEvent(document.body, 'keypress', function() { document.getElementById('d0').innerHTML = x + ',' + y; }); } }()); 

But there are big problems. Key events are dispatched only if the element that can receive keyboard input is focused (input, text field, etc.). Also, if the user scrolls the screen without moving the mouse, the coordinates are likely to be incorrect.

An alternative solution is to use CSS to replace the cursor with custom animations.

Answer 4

If you are using jQuery, you can do the following (assuming you have an image with id="wheelImage" and whose position set to absolute ), write the following inside the keydown event. Here we use the global properties pageX and pageY, which are passed to any handler. You can also use the jQuery shiftKey property to check if the shift key is pressed.

 $().keydown(function(e) { if (e.shiftKey) { e.preventDefault(); $('#wheelImage').css('left',e.pageX ).css('top', e.pageY); } }); 

Answer 5

Load the mouse position.

 var x = 0, y = 0; document.addEventListener('mousemove', function(e){ x = e.pageX y = e.pageY; }, false); document.addEventListener('keyup', function(e){ console.log(x + ' ' + y); }, false); 

Or with the JS ninja library.

 var x = 0, y = 0; $(document).mousemove(function(e){ x = e.pageX y = e.pageY; }); $(document).keypressed(function() { console.log(x + ' ' + y); });