Ottiene la posizione del mouse nell'evento tastiera

Question

Sto tentando di visualizzare una ruota di selezione quando l'utente tiene premuto il tasto Maiusc.

La ruota deve essere centrato sulla posizione del mouse.

Tuttavia, quando eseguo il test, pageX e clientX non sono definiti sull'oggetto evento.

E 'possibile ottenere le coordinate del mouse su un evento tastiera?

Answer 1

No, semplicemente traccia mousemove eventi e salvare continuamente la posizione corrente nel caso in cui si ottiene un evento di tastiera.

Answer 2

Cache posizione del mouse in una variabile globale in ogni evento mousemove e utilizzarlo quando un tasto generato l'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

JavaScript senza 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

Se stai usando jQuery, puoi fare quanto segue (supponendo di avere un'immagine con id="wheelImage" e il cui position è impostato su absolute), scrivere quanto segue all'interno dell'evento keydown. Qui usiamo la pagina delle proprietà globali X e la pagina Y che vengono passate a qualsiasi gestore. Puoi anche utilizzare la proprietà shiftKey di jQuery per verificare se è stato premuto il tasto Maiusc.

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

Answer 4

Memorizza la posizione 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); 

Oppure 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

Ecco l'equivalente POJS di altre risposte che è cross browser torna a IE 6 (e probabilmente IE 5, ma io non ce l'hanno per testare più). Non ci sono variabili globali anche:

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

Ma ci sono problemi più grandi. Gli eventi chiave vengono inviati solo se un elemento che può ricevere input da tastiera è focalizzato (input, textarea e così via). Inoltre, se l'utente scorre lo schermo senza muovere il mouse, probabilmente le coordinate saranno errate.

Una soluzione alternativa è quella di utilizzare i CSS per sostituire il cursore con un'animazione personalizzata.