o evento mouseout ocorre mais de uma vez

StackOverflow https://stackoverflow.com/questions/4069558

  •  28-09-2019
  •  | 
  •  

Pergunta

Oi:quando adiciono um evento mouseout a um elemento pai, parece que todos os seus filhos também são adicionados a esse evento, funciona bem se o evento for um clique do mouse e etc.

No entanto, para o evento mouseout, isso causará alguns resultados inesperados.

Dê uma olhada neste exemplo:

<html>
    <head>
        <script type="text/javascript">
            function init(){
                document.getElementById('par').onmouseout=function(){alert('mouse out')};
            }
    </script>
    </head>
    <body onload='init()'>
        <div id="par" style="width:400px;height:300px">
            <div style="background-color:red;width:100%;height:150px"></div>
            <div style="background-color:black;width:100%;height:150px"></div>
        </div>
    </body>
</html>

por favor, mova do div vermelho para o div preto e, em seguida, saia do div preto, então você receberá duas janelas de alerta, eu só quero uma.

Então, como consertar isso?

Foi útil?

Solução

Isso não é possível usando javascript simples sem o rato sair evento, que, que eu saiba, só é suportado pelo Internet Explorer.

Kits de ferramentas Javascript podem fornecer uma solução, jQuery por exemplo emula esse evento:

O mouseleave evento difere de mouseout Na maneira como ele lida com o evento borbulhando.Se mouseout foram utilizados em este exemplo, em seguida, quando o mouse ponteiro movido para fora do Interno , o manipulador seria Acionado.Isso geralmente é indesejável comportamento.O mouseleave evento, em por outro lado, apenas aciona sua quando o mouse sai do elemento ao qual ele está vinculado, não um descendente.Assim, neste exemplo, o manipulador é acionado quando o mouse deixa o Exterior elemento, mas não o Interno elemento.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top