Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung der korrekten Methode zum Abbrechen und Binden von JQuery-Hover-Ereignissen

黄舟
Freigeben: 2017-06-26 13:24:43
Original
2205 Leute haben es durchsucht

Im Webdesign verwenden wir häufig jquery, um auf das Mouse-Hover-Ereignis zu reagieren, das den gleichen Effekt hat wie Mouseover- und Mouseout-Ereignisse . Aber wie kann man on verwenden, um die Hover-Methode zu binden? Wie verwende ich „off“, um das gebundene Ereignis abzubrechen?
1. So binden Sie das Hover-Ereignis
Schauen Sie sich zunächst den folgenden Code an: Angenommen, wir binden ein Click-and-Hover-Ereignis an das Tag a:

$(document).ready(function(){ $('a').on({ hover: function(e) { 
 //Hover event handler 
alert("hover"); },
 click: function(e) { // Click event handler
alert("click"); } }); 
});
Nach dem Login kopieren

Wenn auf ein Tag geklickt wird, passiert etwas Seltsames. Das gebundene Hover-Ereignis reagiert überhaupt nicht, aber das gebundene Klick-Ereignis reagiert normal.

Aber wenn Sie die Schreibweise ändern, zum Beispiel:

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })
Nach dem Login kopieren
Nach dem Login kopieren


Stattdessen sollten die beiden Ereignisse „mouseenter“ und „mouseleave“ verwendet werden (dies ist auch das Ereignis, das in der .hover() -Funktion verwendet wird)
, damit Sie direkt auf verweisen können:
wie Dies

$(document).ready(function(){ $('a').on({ mouseenter: function(e) {
//Hover event handler 
alert("mouseover"); }, mouseleave: function(e) {
 //Hover event handler 
alert("mouseout"); }, click: function(e) { 
// Clickevent handler 
alert("click"); } }); 
});
Nach dem Login kopieren

Da .hover() ein von jQuery selbst definiertes Ereignis ist, dient es nur der Bequemlichkeit der Benutzer, Mouseenter- und Mouseleave-Ereignisse zu binden und aufzurufen. Es ist kein echtes Ereignis, daher kann es natürlich nicht als Ereignisparameter in .on() aufgerufen werden.
2. So brechen Sie das Hover-Ereignis ab
Wie wir alle wissen, können Sie das gebundene Ereignis mit der Off-Funktion abbrechen, aber Sie können das gebundene Ereignis nur über bind abbrechen. Das Hover-Ereignis in jquery ist etwas ganz Besonderes . Wenn Sie auf diese Weise gebundene Veranstaltungen bestehen, können sie nicht storniert werden.

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })
Nach dem Login kopieren
Nach dem Login kopieren

Der richtige Weg, ein gebundenes Hover-Ereignis abzubrechen:

$('a').off('mouseenter').unbind('mouseleave');
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der korrekten Methode zum Abbrechen und Binden von JQuery-Hover-Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage