Question

我正在尝试在用户按住Shift键时显示选择轮。

滚轮应位于鼠标位置的中心位置。

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

是否可以在键盘事件上获取鼠标坐标？

Answer 1

不，只需跟踪mousemove个事件，并在遇到键盘事件时不断保存当前位置。

Answer 2

在每个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

没有jQuery的JavaScript：

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

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

但是还有更大的问题。仅当可以接收键盘输入的元素被聚焦（输入，文本区域等）时，才会调度键事件。此外，如果用户在不移动鼠标的情况下滚动屏幕，则坐标可能是错误的。

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

Answer 4

如果您正在使用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 5

缓存鼠标位置。

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 Ninja Library。

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

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

5 个答案: