Heim >Web-Frontend >js-Tutorial >Jquery MouseMove Event Maus gleitet über das Bild

Jquery MouseMove Event Maus gleitet über das Bild

黄舟
黄舟Original
2017-06-28 10:23:001362Durchsuche

Probleme, die gelöst werden müssen: Wenn die Maus auf dem Bild geparkt ist, sind die relevanten Informationen des aktuellen Bildes

mein erstes Gefühl, die Maus zu benutzen Ereignis: Mousemove kann das entsprechende Anzeigeereignis auslösen, wenn er/sie auf dem Bild bleibt, und das versteckte Ereignis auslösen, wenn Mouseout es verlässt

Bei der eigentlichen Vervollständigung wurde jedoch Folgendes festgestellt: Die Informationen werden angezeigt, wenn die Maus auf dem Bild bleibt. Nachdem ich die relevanten Informationen überprüft habe, habe ich festgestellt, dass die Erklärung des Mouseover-Ereignisses wie folgt lautet:

Hinweis: Wenn der Benutzer die Maus bewegt Pixel wird ein Mousemove-Ereignis auftreten. Die Verarbeitung aller Mousemove-Ereignisse verbraucht Systemressourcen. Bitte nutzen Sie diese Veranstaltung mit Vorsicht.

Mit anderen Worten: Unsere Maus löst ein Anzeigeereignis aus, selbst wenn ein Pixeljitter auftritt. Kein Wunder, dass dadurch die Bildinformationsressource beschädigt wird

Lösung Die Lösung lautet: Hover verwenden. Das offizielle Handbuch erklärt diese Methode:

ist eine Methode, die ein Hover-Ereignis imitiert (die Maus bewegt sich zu einem Objekt und bewegt sich aus diesem heraus Objekt). Dies ist eine benutzerdefinierte Methode, die für häufig verwendete Aufgaben einen „Keep-in-it“-Status bereitstellt.

Wenn sich die Maus über ein passendes Element bewegt, wird die angegebene erste Funktion ausgelöst. Wenn sich die Maus aus diesem Element herausbewegt, wird die angegebene zweite Funktion ausgelöst. Darüber hinaus wird erkannt, ob sich die Maus noch in einem bestimmten Element befindet (z. B. einem Bild in p). Wenn dies der Fall ist, bleibt sie weiterhin im „Hover“-Zustand, ohne das Move-Out-Ereignis auszulösen (). Modifikation Ein häufiger Fehler) bei der Verwendung des Mouseout-Ereignisses wurde korrigiert.

Beispielcode:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

Das obige ist der detaillierte Inhalt vonJquery MouseMove Event Maus gleitet über das Bild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn