4

No jQuery, qual é a diferença entre mouseleave e mouseout?

Os dois eventos parecem fazer a mesma coisa!

0

2 Respostas 2

3

Basicamente, unica diferença entre os dois é que, o mouseleave é disparado também nos elementos filhos do elemento selecionado, e o mouseout dispara apenas no elemento selecionado.

x = 0;
y = 0;
$(document).ready(function(){
    $("div.over").mouseout(function(){
        $(".over span").text(x += 1);
    });
    $("div.enter").mouseleave(function(){
        $(".enter span").text(y += 1);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>



<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout disparado: <span></span></h3>
</div>

<div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
  <h3 style="background-color:white;">Mouseleave disparado: <span></span></h3>
</div>

Aqui você pode conferir mais sobre esses dois eventos eventos:

mouseout

mouseleave

3

Suponhamos que temos o seguinte HTML (onde cada div possui eventos mouseout, mouseleave atrelados):

<div id="outerBox">OuterBox
    <div id="innerBox">InnerBox
    </div>
</div>
  • Mouseout: Quando o mouse entra em “outerBox” nenhum evento é ativado.
  • Quando o mouse deixa “outerBox” e entra em "innerBox" o evento de “outerBox” é ativado.
  • quando o mouse deixa “innerBox” e entra em “outerBox” o evento do "innerBox" é ativado seguido pelo evento do “outerBox”.
  • quando o mouse deixa “outerBox” seu evento é disparado.

  • Mouseleave: - Quando o mouse entra em “outerBox” nenhum evento é ativado.

  • Quando o mouse deixa “outerBox” e entra em "innerBox" nenhum evento é ativado.
  • quando o mouse deixa “innerBox” e entra em “outerBox” o evento do "innerBox" é ativado.
  • quando o mouse deixa “outerBox” seu evento é disparado.

Logo é possível notar que as diferenças entre ambas estão relacionadas a seus "filhos" "mouseleave" é disparado também nos elementos filhos enquanto o "mouseover" somente no elemento selecionado.

Fonte: http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .