在键盘事件中获取鼠标位置

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将自定义动画替换为光标。