Obteniendo la posición del mouse en el evento del teclado

Question

Estoy intentando que aparezca una rueda de selección cuando el usuario mantiene presionada la tecla Shift.

La rueda debe estar centrada en la posición del mouse.

Sin embargo, cuando pruebo esto, pageX y clientX no están definidos en el objeto de evento.

¿Es posible obtener las coordenadas del mouse en un evento de teclado?

Answer 1

No, simplemente realice un seguimiento de los eventos mousemove y guarde continuamente la posición actual en caso de que reciba un evento de teclado.

Answer 2

posición del ratón caché en una variable global en todos los mousemove evento y utilizarlo cuando una tecla activa el evento:

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

de JavaScript sin 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

Si está utilizando jQuery, puede hacer lo siguiente (suponiendo que tenga una imagen con id="wheelImage" y cuyo position es establecido en absolute), escriba lo siguiente dentro de su evento de selección. Aquí usamos las propiedades globales pageX y pageY que se pasan a cualquier controlador. También puede usar la propiedad shiftKey de jQuery para verificar si se presionó la tecla Mayús.

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

Answer 4

Cache la posición del mouse.

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); 

O con 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); 
}); 

Answer 5

Aquí es el equivalente POJS de otras respuestas que es transversal navegador de nuevo a IE 6 (y probablemente IE 5 pero no tienen que probar nada más). Sin variables globales, incluso:

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; 
    }); 
    } 
}()); 

Pero hay problemas mayores. Los eventos clave solo se envían si un elemento que puede recibir entrada de teclado está enfocado (entrada, área de texto, etc.). Además, si el usuario se desplaza por la pantalla sin mover el mouse, las coordenadas probablemente serán incorrectas.

Una solución alternativa es usar CSS para reemplazar el cursor con una animación personalizada.