Come faccio a svincolare "hover" in jQuery?


107

Come faccio a svincolare "hover" in jQuery?

Questo non funziona:

$(this).unbind('hover');

2
Stai tentando di svincolare una funzione che hai assegnato all'evento hover o stai tentando di modificare un <a> </a> hover?
Justin Niessner

Per chiarire la domanda di Justin Niessner, stai cercando di rimuovere eventi Javascript / DOM o dichiarazioni CSS? Quest'ultima è una questione più complicata.
mancanza di palpebre

Risposte:


214

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

o più succintamente (grazie @Chad Grant ):

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


42
oppure $ (this) .unbind ('mouseenter mouseleave')
Chad Grant

è la sequenza necessaria per mouseenter quindi dopo il mouseleave?
sanghavi7

70

In realtà, la documentazione di jQuery ha un approccio più semplice rispetto agli esempi concatenati mostrati sopra (anche se funzioneranno perfettamente):

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

A partire da jQuery 1.7, puoi anche usare $.on()e $.off()per l'associazione di eventi, quindi per svincolare l'evento hover, dovresti usare il più semplice e ordinato:

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

Lo pseudo-nome-evento "hover" è usato come abbreviazione di "mouseenter mouseleave" ma era gestito in modo diverso nelle versioni precedenti di jQuery; richiedendo di rimuovere espressamente ciascuno dei nomi degli eventi letterali. Usando $.off()ora puoi rilasciare entrambi gli eventi del mouse usando la stessa scorciatoia.

Modifica 2016:

Ancora una domanda popolare, quindi vale la pena attirare l'attenzione sul punto di @ Dennis98 nei commenti seguenti che in jQuery 1.9+, l'evento "hover" è stato deprecato a favore delle chiamate standard "mouseenter mouseleave". Quindi la tua dichiarazione di associazione di eventi dovrebbe ora assomigliare a questo:

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


4
Ho jQuery 1.10.2 e $.off("hover")non funziona. Tuttavia, l'utilizzo di entrambi gli eventi funziona alla grande.
Alexis Wilke

Vale la pena ricordare che quando vengono forniti più argomenti di filtro, tutti gli argomenti forniti devono corrispondere affinché il gestore eventi venga rimosso. Noto anche che i documenti dell'API jQuery affermano che il metodo .off () rimuove i gestori di eventi collegati con .on (). Se ciò significa che si applica SOLO agli eventi aggiunti utilizzando .on (), non sono sicuro. Ma non dovrebbe.
Phil.Wheeler

@AlexisWilke Sì, è stato rimosso nella v1.9, cerca l'ultimo collegamento ..;)
Dennis98

1
@ Dennis98 - Stai solo parlando dell'haver di jQuery che viene spostato in deprecated.js, giusto? l'associazione di eventi $ .off () è ancora disponibile nelle versioni successive di jQuery.
Phil.Wheeler

Destra. :) $.off()è ancora lì, è il metodo consigliato per svincolare gli eventi attualmente. Quindi fin da ora devi scrivere $(element).off("mouseenter mouseleave");.
Dennis98

10

Scollega gli eventi mouseentere mouseleaveindividualmente o svincola tutti gli eventi sugli elementi.

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

o

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

4

unbind () non funziona con eventi inline hardcoded.

Quindi, ad esempio, se vuoi svincolare l'evento mouseover da <div id="some_div" onmouseover="do_something();">, ho scoperto che $('#some_div').attr('onmouseover','')è un modo rapido e sporco per ottenerlo.


4

Un'altra soluzione è .die () per gli eventi collegati a .live () .

Ex.:

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

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

Puoi trovare un buon riferimento qui: Exploring jQuery .live () e .die ()

(Scusa per il mio inglese: ">)


2

Tutto ciò che viene fatto al passaggio del mouse dietro le quinte è vincolante per la proprietà mouseover e mouseout. Legherei e svincolerei le vostre funzioni da quegli eventi individualmente.

Ad esempio, supponi di avere il seguente html:

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

allora il tuo jQuery sarebbe:

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

});

Correzione, dopo aver esaminato jquery src, il passaggio del mouse è effettivamente vincolante per mouseenter / mouseleave. Dovresti fare lo stesso.
bendewey

2

È possibile rimuovere un gestore di eventi specifico collegato da on, utilizzandooff

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

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

Usando questo, rimuoverai solo handlerFunction.
Un'altra buona pratica è impostare uno spazio dei nomi per più eventi allegati

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

0

Ho scoperto che funziona come secondo argomento (funzione) per .hover ()

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

La prima funzione (argomento di .hover ()) è il passaggio del mouse e eseguirà il codice. Il secondo argomento è mouseout che svincolerà l'evento hover da #yourId. Il tuo codice verrà eseguito solo una volta.


1
Il $.unbind()da solo come questo non rimuoverebbe tutti gli eventi da quell'oggetto? In tal caso cose come i tuoi $.click()eventi ora fallirebbero, giusto?
Alexis Wilke
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.