Como faço para desvincular “hover” em jQuery?

107

Como faço para desvincular "hover" no jQuery?

Isso não funciona:

$(this).unbind('hover');
zsharp
fonte
2
Você está tentando desvincular uma função atribuída ao evento de foco ou está tentando modificar um <a> </a> recurso?
Justin Niessner
Para esclarecer a pergunta de Justin Niessner, você está tentando remover eventos Javascript / DOM ou declarações CSS? O último é um assunto mais complicado.
ausência de pálpebras

Respostas:

214

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

ou mais sucintamente (obrigado @Chad Grant ):

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

Crescent Fresh
fonte
42
ou $ (this) .unbind ('mouseenter mouseleave')
Chad Grant
é necessária a seqüência para o mouseenter e depois a saída do mouse?
sanghavi7
70

Na verdade, a documentação do jQuery tem uma abordagem mais simples do que os exemplos encadeados mostrados acima (embora eles funcionem bem):

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

A partir do jQuery 1.7, você também pode usar $.on()e $.off()para associação de evento, portanto, para desvincular o evento hover, você usaria o mais simples e mais organizado:

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

O pseudo-event-name "hover" é usado como uma abreviação para "mouseenter mouseleave", mas era tratado de forma diferente nas versões anteriores do jQuery; exigindo que você remova expressamente cada um dos nomes de eventos literais. Usar $.off()agora permite que você solte ambos os eventos do mouse usando a mesma abreviação.

Editar 2016:

Ainda é uma pergunta popular, então vale a pena chamar a atenção para o ponto de @ Dennis98 nos comentários abaixo de que no jQuery 1.9+, o evento "hover" foi descontinuado em favor das chamadas "mouseenter mouseleave" padrão. Portanto, sua declaração de associação de evento agora deve ter a seguinte aparência:

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

Phil.Wheeler
fonte
4
Tenho o jQuery 1.10.2 e o $.off("hover")não funciona. No entanto, usar os dois eventos funciona muito bem.
Alexis Wilke
Vale a pena mencionar que, quando vários argumentos de filtragem são fornecidos, todos os argumentos fornecidos devem corresponder para que o manipulador de eventos seja removido. Também observo que os documentos da API jQuery afirmam que o método .off () remove os manipuladores de eventos que foram anexados com .on (). Se isso significa que APENAS se aplica a eventos adicionados usando .on (), não tenho certeza. Mas não deveria.
Phil.Wheeler
@AlexisWilke Sim, foi removido na v1.9, procure o último link ..;)
Dennis98
1
@ Dennis98 - Você está falando sobre o hack do jQuery hover sendo movido para deprecated.js, certo? a associação de evento $ .off () ainda está disponível em versões posteriores do jQuery.
Phil.Wheeler
Certo. :) $.off()ainda está lá, é o método recomendado para desvincular eventos atualmente. Portanto, a partir de agora, você precisa escrever $(element).off("mouseenter mouseleave");.
Dennis98
10

Desvincule os eventos mouseentere mouseleaveindividualmente ou desvincule todos os eventos no (s) elemento (s).

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

ou

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

unbind () não funciona com eventos embutidos codificados.

Então, por exemplo, se você quiser desvincular o evento mouseover <div id="some_div" onmouseover="do_something();">, descobri que $('#some_div').attr('onmouseover','')é uma maneira rápida e suja de fazer isso.

Jaytop
fonte
4

Outra solução é .die () para eventos vinculados a .live () .

Ex.:

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

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

Você pode encontrar uma boa referência aqui: Explorando jQuery .live () e .die ()

(Desculpe pelo meu inglês: ">)

Briganti
fonte
2

Tudo o que o hover está fazendo nos bastidores é vinculado às propriedades mouseover e mouseout. Gostaria de vincular e desvincular suas funções desses eventos individualmente.

Por exemplo, digamos que você tenha o seguinte html:

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

então seu jQuery seria:

$(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
fonte
Correção, depois de olhar para jquery src, o hover está na verdade vinculado a mouseenter / mouseleave. Você deveria fazer o mesmo.
bendewey
2

Você pode remover um manipulador de eventos específico que foi anexado onusandooff

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

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

Usando isso, você removerá apenas handlerFunction
Outra boa prática é definir um nameSpace para vários eventos anexados

$("#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
fonte
0

Descobri que isso funciona como um segundo argumento (função) para .hover ()

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

A primeira função (argumento para .hover ()) é mouseover e executará seu código. O segundo argumento é mouseout, que desvinculará o evento hover de #yourId. Seu código será executado apenas uma vez.

Foppe
fonte
1
$.unbind()Por si só, não removeria todos os eventos desse objeto? Nesse caso, coisas como seus $.click()eventos falhariam agora, certo?
Alexis Wilke