Überprüfen Sie, ob sich die Maus innerhalb von div befindet
Lesezeit: 3 Minuten
Ich möchte eine if-Anweisung verwenden, um zu überprüfen, ob sich die Maus in einem bestimmten div befindet, etwa so:
if ( mouse is inside #element ) {
// do something
} else {
return;
}
Dies führt dazu, dass die Funktion startet, wenn sich die Maus innerhalb von #element befindet, und stoppt, wenn sich die Maus außerhalb von #element befindet.
Warum nicht einen Event-Handler anhängen mouseenter/mouseover für das Element, das Sie benötigen?
– Rory McCrossan
21. April 2016 um 10:45 Uhr
Sie könnten es möglicherweise mit tun getElementFromPoint()aber das direkte Anhängen an das Ereignis auf dem Element wäre zuverlässiger und besser, IMO.
– Rory McCrossan
21. April 2016 um 10:51 Uhr
oder Hor
Sie können jQuery-Handler registrieren:
var isOnDiv = false;
$(yourDiv).mouseenter(function(){isOnDiv=true;});
$(yourDiv).mouseleave(function(){isOnDiv=false;});
if ( isOnDiv===true ) {
// do something
} else {
return;
}
Danke! das habe ich gesucht. Blöd, dass mir das nicht selbst eingefallen ist
– Maarten Wolfsen
21. April 2016 um 10:51 Uhr
Dies hängt vom Auslöser dieser Ereignisse ab, die durchlaufen werden, was nicht zuverlässig ist, wenn es überlappende Elemente auf der Z-Ebene gibt.
– Max Hudson
8. September 2017 um 16:58 Uhr
Dies schlägt fehl, wenn ein anderes Element direkt über dem zu testenden Element positioniert wird.
– Johannes
27. September 2018 um 14:33 Uhr
GMchris
Nun, dafür sind Events da. Hängen Sie einfach einen Ereignis-Listener an das div an, das Sie überwachen möchten.
var div = document.getElementById('myDiv');
div.addEventListener('mouseenter', function(){
// stuff to do when the mouse enters this div
}, false);
Wenn Sie dies mit Mathematik tun möchten, müssen Sie immer noch ein Ereignis für ein übergeordnetes Element oder etwas anderes haben, um die Mauskoordinaten abrufen zu können, die dann in einem Ereignisobjekt gespeichert werden, das an den Callback übergeben wird.
var body = document.getElementsByTagName('body');
var divRect = document.getElementById('myDiv').getBoundingClientRect();
body.addEventListener('mousemove', function(event){
if (event.clientX >= divRect.left && event.clientX <= divRect.right &&
event.clientY >= divRect.top && event.clientY <= divRect.bottom) {
// Mouse is inside element.
}
}, false);
Aber es ist am besten, die obige Methode zu verwenden.
verdammt noch mal, 10 Minuten Debuggen und Schrauben, Kumpel! es sollte sein event.clientY >= divRect.top
– Skythargon
17. April 2017 um 21:19 Uhr
lol, nein, der letzte Teil sollte so sein event.clientY <= divRect.bottom
– Skythargon
17. April 2017 um 22:34 Uhr
M. Feyz
einfach können Sie dies verwenden:
var element = document.getElementById("myId");
if (element.parentNode.querySelector(":hover") == element) {
//Mouse is inside element
} else {
//Mouse is outside element
}
Verbesserung anhand der Kommentare
const element = document.getElementById("myId");
if (element.parentNode.matches(":hover")) {
//Mouse is inside element
} else {
//Mouse is outside element
}
In modernen Browsern können Sie das einfach tun element.matches(':hover')
– Jacob
12. August 2019 um 21:23 Uhr
Hallo, clevere Lösung.
– Barak
29. März 2020 um 19:46 Uhr
sehr schlau 🙂
– ic3
25. Mai 2020 um 19:52 Uhr
für jquery ist es $(element).is(':hover')
– Walty Yeung
30. September 2020 um 5:20 Uhr
Sehr clevere und einfache Lösung. Hat magisch funktioniert
– Van_Paitin
19. Februar 2021 um 4:26 Uhr
Gautam Patadiya
$("div").mouseover(function(){
//here your stuff so simple..
});
Sie können so etwas tun
var flag = false;
$("div").mouseover(function(){
flag = true;
testing();
});
$("div").mouseout(function(){
flag = false;
testing();
});
function testing(){
if(flag){
//mouse hover
}else{
//mouse out
}
}
14357700cookie-checkÜberprüfen Sie, ob sich die Maus innerhalb von div befindetyes
Warum nicht einen Event-Handler anhängen
mouseenter
/mouseover
für das Element, das Sie benötigen?– Rory McCrossan
21. April 2016 um 10:45 Uhr
Sie könnten es möglicherweise mit tun
getElementFromPoint()
aber das direkte Anhängen an das Ereignis auf dem Element wäre zuverlässiger und besser, IMO.– Rory McCrossan
21. April 2016 um 10:51 Uhr