So binden und brechen Sie Hover-Ereignisse in jQuery (Code im Anhang)

In diesem Artikel geht es hauptsächlich darum, wie man mit bind die Hover-Methode bindet und wie man mit unbind das gebundene Ereignis abbricht. Wenn Sie es brauchen, können Sie einen Blick darauf werfen.

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 verwendet man Bind, um die Hover-Methode zu binden? 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: Angenommen, wir binden ein Click-and-Hover-Ereignis an das Tag a:

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:

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

Kann dieser Code nicht normal ausgeführt werden?

Tatsächlich nein, stattdessen sollten die beiden Ereignisse Mouseenter und Mouseleave verwendet werden (dies ist auch das Ereignis, das in der Funktion .hover() verwendet wird), sodass es direkt wie folgt zitiert werden kann:

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

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 handelt sich nicht um ein echtes Ereignis, daher kann es natürlich nicht als Ereignis aufgerufen werden Parameter in .bind().

2. So stornieren Sie das Hover-Event

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

$(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");
    }
  });
});

Der richtige Weg, das gebundene Hover-Ereignis abzubrechen:

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

3. Zusammenfassung

Tatsächlich können Sie sich auf jquery beziehen Für diese Probleme haben nur wenige Menschen die offizielle Dokumentation im Internet gelesen, in der nur erläutert wird, wie diese Methode verwendet wird. Es gibt kein umfassendes Verständnis dafür, warum sie so geschrieben ist. Wenn Sie Fragen haben, hinterlassen Sie bitte einen Kommentar.

Das obige ist der detaillierte Inhalt vonSo binden und brechen Sie Hover-Ereignisse in jQuery (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!