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

Getting mouse position in keyboard event

本文关键字：鼠标 位置 获取 键盘 事件      更新时间：2023-09-26

我想在用户按住Shift键时出现一个选择轮。

滚轮应该在鼠标的中心位置

然而，当我对此进行测试时，pageX和clientX在事件对象上都是未定义的。

是否可以在键盘事件上获得鼠标坐标?

不，只需跟踪mousemove事件并不断保存当前位置，以防您得到键盘事件

在每个mousemove事件中将鼠标位置缓存到全局变量中，并在键事件触发时使用它:

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

缓存鼠标位置

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

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

但是还有更大的问题。只有当能够接收键盘输入的元素被聚焦(input、textarea等)时，才会分派键事件。此外，如果用户在不移动鼠标的情况下滚动屏幕，则坐标可能会出错。

另一种解决方案是使用CSS将光标替换为自定义动画

如果您正在使用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);
  }  
});
相关文章：