Uzyskiwanie pozycji myszy w zdarzeniu klawiatury

Question

Próbuję wyświetlić kółko wyboru, gdy użytkownik przytrzyma klawisz Shift.

Koło powinno być wyśrodkowane na pozycji myszy.

Jednak kiedy to przetestuję, pageX i clientX są niezdefiniowane w obiekcie zdarzenia.

Czy można uzyskać współrzędne myszy na zdarzeniu z klawiatury?

Answer 1

Nie, po prostu śledź zdarzenia mousemove i bez przerwy zapisuj bieżącą pozycję w przypadku pojawienia się zdarzenia na klawiaturze.

Answer 2

Cache pozycja myszy w zmiennej globalnej w każdym mousemove imprezy i używać go, gdy klucz Zdarzenie:

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 bez 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

Jeśli używasz jQuery, możesz wykonać następujące czynności (zakładając, że masz obraz z id="wheelImage" i którego position jest ustaw na absolute), napisz następujące informacje w swoim zdarzeniu keydown. Tutaj używamy globalnych właściwości pageX i pageY, które są przekazywane do dowolnego programu obsługi. Możesz także użyć właściwości jQuery: shiftKey, aby sprawdzić, czy klawisz Shift został naciśnięty.

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

Answer 4

Cache pozycji myszy.

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

Lub z biblioteką JS Ninja.

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

Answer 5

Oto odpowiednik POJS innych odpowiedzi, które jest krzyż z powrotem do przeglądarki IE 6 (i prawdopodobnie IE 5, ale nie mam go przetestować dłużej). Brak zmiennych globalnych:

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

Ale są większe problemy. Zdarzenia kluczowe są wywoływane tylko wtedy, gdy aktywny jest element, który może odbierać dane z klawiatury (input, textarea itd.). Ponadto, jeśli użytkownik przewinie ekran bez poruszania myszą, współrzędne będą prawdopodobnie nieprawidłowe.

Alternatywnym rozwiązaniem jest użycie CSS do zastąpienia kursora niestandardową animacją.