Получение позиции мыши в событии клавиатуры

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

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

Вот 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 для замены курсора на собственную анимацию.

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

Если вы используете 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);
  }  
});