Как обнаружить нажатие клавиши и наведение мыши одновременно

Хорошо, поэтому я могу обнаружить наводку с помощью .on('mouseover')

и я могу обнаружить нажатия клавиш с помощью

$(document).keypress(function(e) {
        console.log(e.which);
}

но как определить, какое изображение наводится на мою мышь, когда я нажимаю определенную кнопку?

Идея состоит в том, чтобы иметь возможность удалять изображение, нажимая d во время зависания. любые идеи?

Ответы

Ответ 1

Вы можете просто переключить класс или атрибут данных, который показывает, какой из них находится в данный момент

$('img').hover(function(){
   $(this).toggleClass('active'); // if hovered then it has class active
});
$(document).keypress(function(e) {    
    if(e.which == 100){
       $('.active').remove(); // if d is pressed then remove active image
    }
});

FIDDLE

Ответ 2

Я добавил лучший пример с jsFiddle: http://jsfiddle.net/cUCGX/ (наведите указатель мыши на одно из полей и нажмите клавишу ввода.)

Дайте каждому изображению (on mouseover) и установите переменную на основе этого изображения.

Итак,

var activeImage = null;

myImage.on('mouseover', function() {
  activeImage = 'myImage';
});

myImage2.on('mouseover', function() {
  activeImage = 'myImage2';
});

$(document).keypress(function(e) {
  if (e.which == 'certainKeyPress'  && activeImage) {
    //do something with activeImage
    console.log('The cursor was over image: ' + activeImage + ' when the key was pressed');
  }
});

Возможно, также добавьте onmouseout для каждого изображения, чтобы очистить activeImage, если вы хотите, чтобы клавиша нажала только на работу, КОГДА наведите курсор.

Ответ 3

Вы должны использовать событие mousemove для постоянного хранения позиций x и y в глобальной переменной.

Затем в обработчике нажатия возьмите элемент в последней известной позиции мыши с помощью метода document.elementFromPoint(x, y).

См. https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint

Ответ 4

Я собираюсь пойти дальше и некрутить это, когда я играл с этим, и нашел, что мне понравилось мое быстрое решение. Это может быть не самое лучшее, но для моих нужд оно лучше работало, когда мне понадобилось решение типа пространства имен, в котором обработчик был бы удален, когда dom находился в определенном состоянии (sortable):

// Create handler for binding keyup/down based on keyCode
// (ctrl in this example) with namespace to change the cursor
var setCursorBindings = function() {
    $(document).on('keydown.sortable', function(event) {
        if (event.keyCode === 17) {
            $('body').css('cursor', 'pointer');
        }
    }).on('keyup.sortable', function(event) {
        if (event.keyCode === 17) {
            $('body').css('cursor', 'inherit');
        }
    });
};

// Create a handler for reverting the cursor 
// and remove the keydown and keyup bindings.
var clearCursorBindings = function() {
    $('body').css('cursor', 'inherit');
    $(document).off('keydown.sortable').off('keyup.sortable');
};

// Use the jQuery hover in/out to set and clear the cursor handlers
$('.myElementSelector').hover(function() {
    setCursorBindings();
}, function() {
    clearCursorBindings();
});

Протестировано в Chrome v41

Ответ 5

Используйте это, чтобы проверить, находится ли мышь над изображением с идентификатором img:

$('#img').is(":hover")