Qual é a diferença entre os eventos mouseover e mouseenter?


153

Eu sempre usei o mouseoverevento, mas ao ler a documentação do jQuery que encontrei mouseenter. Eles parecem funcionar exatamente da mesma maneira.

Existe uma diferença entre os dois e, se sim, quando devo usá-los?
(Também se aplica a mouseoutvs mouseleave).

Respostas:


118

Você pode experimentar o seguinte exemplo na página de documentos do jQuery . É uma demonstração agradável e interativa que torna muito claro e você pode realmente ver por si mesmo.

Em resumo, você notará que um evento de mouse over ocorre em um elemento quando você está sobre ele - proveniente do elemento filho OU pai, mas um evento de entrada do mouse ocorre apenas quando o mouse se move de fora desse elemento para esse elemento.

Ou, como mouseover()dizem os documentos :

[ .mouseover()] pode causar muitas dores de cabeça devido a bolhas de eventos. Por exemplo, quando o ponteiro do mouse se move sobre o elemento Inner neste exemplo, um evento de mouseover será enviado para ele e, em seguida, subirá para Outer. Isso pode acionar nosso manipulador de mouseover vinculado em momentos inoportunos. Veja a discussão .mouseenter()para uma alternativa útil.


40
Não é verdade que mouseenter"só ocorre quando o mouse se move do elemento pai para o elemento". O evento ocorre quando o mouse passa de fora do elemento para dentro dele. Não importa de qual elemento o mouse veio. É verdade que o mouse geralmente vem dos pais, mas nem sempre. Por exemplo, se o pai não tiver preenchimento ou borda, o mouse poderá entrar direto do avô e mouseenterainda disparará. De fato, ele pode até inserir o elemento de fora da janela de visualização (se o elemento estiver no limite) e o evento ainda é acionado.
Callum

2
DEMO é a melhor explicação;)
Luckylooke

de verdade, apenas brinque com a demo.
Kevin Wheeler

43

Mouseenter e mouseleave não reagir a subida do evento, enquanto mouseover e mouseout fazer .

Aqui está um artigo que descreve o comportamento.


6
Isso explica perfeitamente: bl.ocks.org/mbostock/5247027 o mouseover é acionado toda vez que é disparado de dentro do contêiner, devido a bolhas de eventos.
Rafael Emshoff

4

Como geralmente acontece com perguntas como essas, o Quirksmode tem a melhor resposta .

Eu imagino que, como um dos objetivos do jQuery é tornar as coisas independentes do navegador, o uso de qualquer nome de evento desencadeará o mesmo comportamento. Edit: graças a outras postagens, agora vejo que não é esse o caso


0
$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });


se o seu elemento não tiver elementos filhos, mas se o elemento tiver filhos, os pares se comportarão de maneira bem diferente. Em poucas palavras, se você passar o mouse para um elemento e depois para o filho, o mouseover / mouseout será acionado, enquanto apenas o mouseenter será acionado, pois o mouse ainda está tecnicamente dentro do elemento.
nave 21/10
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.