Jak wykryć przyciśnięcie a mouseover jednocześnie

Question

Dobrze więc mogę wykryć mouseover przy użyciu .on('mouseover')

i mogę wykryć naciśnięć klawiszy za pomocą

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

ale w jaki sposób wykryć, który obraz mojego myszy unosi się, gdy naciśniesz jakiś przycisk?

chodzi o to, aby usunąć obraz, naciskając klawisz d, gdy najechałeś na niego. jakieś pomysły ?

Answer 1

można po prostu przełączyć klasę lub danych atrybutu, który pokazuje, który z nich jest obecnie unosił

$('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

Answer 2

I'v dodane lepszy przykład z jsFiddle: http://jsfiddle.net/cUCGX/ (. Umieść kursor na jednym z pól i naciśnij ENTER)

---

Daj każdy obraz na („mouseover”) i ustawić zmienną w oparciu na tym obrazie.

Więc

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

Może również dodać onMouseOut do każdego obrazu, a także wyczyścić activeImage jeśli chcesz, naciśnij przycisk, aby tylko pracy, kiedy są odkurzane.

Answer 3

Należy użyć mouseMove wydarzenie na stałe przechowywać x & y pozycja w zmiennej globalnej.

Następnie, w procedurze obsługi naciśnięć klawisza, chwyć element w ostatniej znanej pozycji myszy za pomocą metody document.elementFromPoint (x, y).

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

Answer 4

Służy do testowania, czy mysz jest nad obrazem z id img:

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

Answer 5

mam zamiar iść do przodu i Necro to jak grałem z tym i dookoła odkryłem, że podobało mi się moje szybkie rozwiązanie. To może nie być najlepszy, ale to działało lepiej dla moich potrzeb, gdzie potrzebne rozwiązanie typu nazw że teleskopowa zostaną usunięte, gdy dom był w pewnym stanie (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(); 
}); 

Testowany w Chrome v41