Wie kann ich den Schwebeflug in jQuery aufheben?

107

Wie binde ich den "Schwebeflug" in jQuery auf?

Das funktioniert nicht:

$(this).unbind('hover');
zsharp
quelle
2
Versuchen Sie, eine Funktion aufzuheben, die Sie dem Hover-Ereignis zugewiesen haben, oder versuchen Sie, einen <a> </a> Hover zu ändern?
Justin Niessner
Versuchen Sie zur Klärung der Frage von Justin Niessner, Javascript / DOM-Ereignisse oder CSS-Deklarationen zu entfernen? Letzteres ist komplizierter.
Augenlidlosigkeit

Antworten:

214

$(this).unbind('mouseenter').unbind('mouseleave')

oder prägnanter (danke @Chad Grant ):

$(this).unbind('mouseenter mouseleave')

Halbmond frisch
quelle
42
oder $ (this) .unbind ('mouseenter mouseleave')
Chad Grant
Ist es eine notwendige Sequenz für Mouseenter nach Mouseleave?
Sanghavi7
70

Tatsächlich hat die jQuery-Dokumentation einen einfacheren Ansatz als die oben gezeigten verketteten Beispiele (obwohl sie einwandfrei funktionieren):

$("#myElement").unbind('mouseenter mouseleave');

Ab jQuery 1.7 können Sie auch $.on()und $.off()für die Ereignisbindung verwenden. Um das Schwebeereignis zu lösen, verwenden Sie Folgendes: Einfacher und übersichtlicher:

$('#myElement').off('hover');

Der Pseudoereignisname "hover " wird als Abkürzung für "mouseenter mouseleave" verwendet, wurde jedoch in früheren jQuery-Versionen anders behandelt. Sie müssen jeden der wörtlichen Ereignisnamen ausdrücklich entfernen. Mit " $.off()Jetzt verwenden" können Sie beide Mausereignisse mit derselben Kurzform löschen.

Bearbeiten 2016:

Es ist immer noch eine beliebte Frage, daher lohnt es sich, in den Kommentaren unten auf den Punkt von @ Dennis98 aufmerksam zu machen , dass in jQuery 1.9+ das "Hover " -Ereignis zugunsten der Standardaufrufe "mouseenter mouseleave" veraltet war . Ihre Ereignisbindungserklärung sollte nun folgendermaßen aussehen:

$('#myElement').off('mouseenter mouseleave');

Phil.Wheeler
quelle
4
Ich habe jQuery 1.10.2 und das $.off("hover")funktioniert nicht. Die Verwendung beider Ereignisse funktioniert jedoch hervorragend.
Alexis Wilke
Erwähnenswert ist, dass bei Angabe mehrerer Filterargumente alle angegebenen Argumente übereinstimmen müssen, damit der Ereignishandler entfernt werden kann. Ich stelle außerdem fest, dass in den jQuery-API-Dokumenten angegeben ist, dass die .off () -Methode Ereignishandler entfernt, die mit .on () verknüpft waren. Ob dies bedeutet, dass es NUR für Ereignisse gilt, die mit .on () hinzugefügt wurden, weiß ich nicht genau. Aber es sollte nicht.
Phil.Wheeler
@AlexisWilke Yep, es wurde in v1.9 entfernt, suchen Sie den letzten Link ..;)
Dennis98
1
@ Dennis98 - Du redest nur davon, dass der jQuery-Hover-Hack auf deprecated.js verschoben wird, oder? Die Ereignisbindung $ .off () ist in späteren Versionen von jQuery weiterhin verfügbar.
Phil.Wheeler
Richtig. :) $.off()ist immer noch da, es ist derzeit die empfohlene Methode zum Aufheben der Bindung von Ereignissen. Ab sofort müssen Sie also schreiben $(element).off("mouseenter mouseleave");.
Dennis98
10

Entbinden Sie die Ereignisse mouseenterund mouseleaveeinzeln oder lösen Sie alle Ereignisse auf den Elementen.

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

oder

$(this).unbind();  // assuming you have no other handlers you want to keep
Tvanfosson
quelle
4

unbind () funktioniert nicht mit fest codierten Inline-Ereignissen.

Wenn Sie beispielsweise das Mouseover-Ereignis von trennen möchten <div id="some_div" onmouseover="do_something();">, $('#some_div').attr('onmouseover','')ist dies ein schneller und schmutziger Weg, um dies zu erreichen.

Jaytop
quelle
4

Eine andere Lösung ist .die () für Ereignisse, die mit .live () verknüpft sind .

Ex.:

// attach click event for <a> tags
$('a').live('click', function(){});

// deattach click event from <a> tags
$('a').die('click');

Eine gute Referenz finden Sie hier: Erkunden von jQuery .live () und .die ()

(Entschuldigung für mein Englisch: ">)

Briganti
quelle
2

Alles, was Sie hinter den Kulissen tun, ist an die Eigenschaft mouseover und mouseout gebunden. Ich würde Ihre Funktionen von diesen Ereignissen individuell binden und trennen.

Angenommen, Sie haben das folgende HTML:

<a href="#" class="myLink">Link</a>

dann wäre deine jQuery:

$(document).ready(function() {

  function mouseOver()
  {
    $(this).css('color', 'red');
  }
  function mouseOut()
  {
    $(this).css('color', 'blue');
  }

  // either of these might work
  $('.myLink').hover(mouseOver, mouseOut); 
  $('.myLink').mouseover(mouseOver).mouseout(mouseOut); 
  // otherwise use this
  $('.myLink').bind('mouseover', mouseOver).bind('mouseout', mouseOut);


  // then to unbind
  $('.myLink').click(function(e) {
    e.preventDefault();
    $('.myLink').unbind('mouseover', mouseOver).unbind('mouseout', mouseOut);
  });

});
Bendewey
quelle
Korrektur: Nach dem Betrachten der jquery ist src hover tatsächlich an mouseenter / mouseleave gebunden. Do solltest das auch machen.
Bendewey
2

Sie können einen bestimmten Ereignishandler entfernen, der von mit angehängt onwurdeoff

$("#ID").on ("eventName", additionalCss, handlerFunction);

// to remove the specific handler
$("#ID").off ("eventName", additionalCss, handlerFunction);

Auf diese Weise entfernen Sie nur handlerFunction.
Eine weitere bewährte Methode besteht darin, einen nameSpace für mehrere angehängte Ereignisse festzulegen

$("#ID").on ("eventName1.nameSpace", additionalCss, handlerFunction1);
$("#ID").on ("eventName2.nameSpace", additionalCss, handlerFunction2);
// ...
$("#ID").on ("eventNameN.nameSpace", additionalCss, handlerFunctionN);

// and to remove handlerFunction from 1 to N, just use this
$("#ID").off(".nameSpace");
Halayem Anis
quelle
0

Ich fand, dass dies als zweites Argument (Funktion) für .hover () funktioniert.

$('#yourId').hover(
    function(){
        // Your code goes here
    },
    function(){
        $(this).unbind()
    }
});

Die erste Funktion (Argument für .hover ()) ist Mouseover und führt Ihren Code aus. Das zweite Argument ist das Mouseout, mit dem das Hover-Ereignis von #yourId getrennt wird. Ihr Code wird nur einmal ausgeführt.

Foppe
quelle
1
Würde das nicht $.unbind()alleine alle Ereignisse von diesem Objekt entfernen? In welchem ​​Fall würden Dinge wie Ihre $.click()Veranstaltungen jetzt scheitern, oder?
Alexis Wilke