Ü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 hors Benutzeravatar
oder Hor

Sie können jQuery-Handler registrieren:

var isOnDiv = false;
$(yourDiv).mouseenter(function(){isOnDiv=true;});
$(yourDiv).mouseleave(function(){isOnDiv=false;});

keine jQuery-Alternative:

document.getElementById("element").addEventListener("mouseenter", function(  ) {isOnDiv=true;});
document.getElementById("element").addEventListener("mouseout", function(  ) {isOnDiv=false;});

und woanders:

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

Benutzeravatar von GMchris
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

Benutzeravatar von M. Feyz
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

Benutzeravatar von Gautam Patadiya
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
    }
}

1435770cookie-checkÜberprüfen Sie, ob sich die Maus innerhalb von div befindet

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy