jquery: Implementierungscode zum Abbrechen und Binden des Hover-Ereignisses

Der folgende Editor liefert Ihnen einen Implementierungscode zum Abbrechen und Binden des Hover--Ereignisses in jquery. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Editor und werfen wir einen Blick darauf

Im Webdesign verwenden wir häufig JQuery, um auf Maus-Hover-Ereignisse zu reagieren, die den gleichen Effekt haben wie Mouseover- und Mouseout-Ereignisse, aber wie bindet man sie, um sie zu binden. Was ist damit? die Hover-Methode? Wie verwende ich Unbind, um die Bindung eines Ereignisses aufzuheben?

1. So binden Sie das Hover-Ereignis

Schauen Sie sich zunächst den folgenden Code an tag:

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

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 Schreibmethode ändern, zum Beispiel:

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

Dieser Code kann nicht normal ausgeführt werden. Kann die Bindung nicht an den Schwebezustand gebunden werden?

Tatsächlich nein, Sie sollten stattdessen die beiden Ereignisse Mouseenter und Mouseleave verwenden (dies ist auch das Ereignis, das in der Funktion .hover() verwendet wird), damit Sie es direkt wie folgt tun können dieses Zitat :

$(document).ready(function(){
  $('a').bind({
    mouseenter: function(e) {
      // Hover event handler
      alert("mouseover");
    },
    mouseleave: function(e) {
      // Hover event handler
      alert("mouseout");
    },
    click: function(e) {
      // Click event handler
      alert("click");
    }
  });
});

Weil .hover() ein von jQuery selbst definiertes Ereignis ist. Es dient nur der Bequemlichkeit der Benutzer, Mouseenter- und Mouseleave-Ereignisse zu binden und aufzurufen Es handelt sich nicht um ein echtes Ereignis, daher kann es natürlich nicht als mit Ereignisparametern in .bind() aufgerufen angesehen werden.

2. So stornieren Sie das Hover-Ereignis

Wie wir alle wissen, können Sie die Funktion zum Aufheben der Bindung verwenden, um gebundene Ereignisse abzubrechen, Sie können jedoch nur durchgebundene Ereignisse stornieren bind. Das Hover-Ereignis in jquery ist etwas ganz Besonderes. Wenn das Ereignis auf diese Weise gebunden ist, kann es nicht abgebrochen werden.

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

Der richtige Weg, das gebundene Hover-Ereignis abzubrechen:

$('a').unbind('mouseenter').unbind('mouseleave');

3 🎜>Tatsächlich können Sie sich bei diesen Problemen auf die offizielle Dokumentation von jquery beziehen, aber nur wenige Leute haben sie gelesen. Die meisten Tutorials im Internet erklären nur, wie diese Methode verwendet wird, und erreichen nur das Ziel, ohne in die Tiefe zu gehen Verstehen Sie, warum Sie so schreiben?

Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar.

Das obige ist der detaillierte Inhalt vonjquery: Implementierungscode zum Abbrechen und Binden des Hover-Ereignisses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!