在鍵盤事件中獲取鼠標位置

Question

我想在用戶按住Shift鍵時出現選擇輪。

車輪應該位於鼠標位置的中心。

但是，當我測試這個，pageX和clientX都未定義的事件對象。

是否有可能獲得鍵盤事件上的鼠標座標？

Answer 1

不，只需跟蹤mousemove事件並持續保存當前位置以防發生鍵盤事件。在每一個mousemove事件在全局變量

Answer 2

緩存鼠標的位置，並使用它時，一個關鍵的事件觸發：

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沒有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

如果你正在使用jQuery，你可以做到以下幾點（假設你有一個圖片id="wheelImage"和position是設置爲absolute），在你的keydown事件中寫入以下內容。這裏我們使用傳遞給任何處理程序的全局屬性pageX和pageY。你也可以使用jQuery的shiftKey屬性來檢查shift鍵是否被按下。

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

Answer 4

緩存鼠標位置。

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

或與JS忍者圖書館。

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

Answer 5

這裏的POJS相當於其他的答案是跨瀏覽器的回IE 6（也可能IE 5，但我沒有它測試了）。甚至沒有全局變量：

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

但還有更大的問題。如果可以接收鍵盤輸入的元素被聚焦（輸入，textarea等），則僅調度鍵事件。另外，如果用戶在不移動鼠標的情況下滾動屏幕，則座標可能是錯誤的。

另一種解決方案是使用CSS將自定義動畫替換爲光標。