Falando em ter um elemento DIV, há um elemento IMG e um elemento SPAN dentro, não se preocupe com a forma como esses dois elementos internos estão organizados, esse não é o ponto que quero discutir.
Para conseguir alguns efeitos especiais, preciso usar os eventos onmouseover e onmouseout do TD, e quando testar, encontrarei a seguinte situação:
Quando o mouse se move dentro do DIV, o evento onmouseover é acionado; Depois, mova o mouse para o IMG ou SPAN dentro do DIV, definitivamente não achamos que o mouse tenha se movido para fora do DIV, mas o estranho é que o evento onmouseout é acionado, e o evento onmouseover também é acionado imediatamente.
Isso não é o que eu quero, então como posso "bloquear" a interferência dos eventos Javascrip{filtering}t trazidos por elementos internos para elementos externos?
Aqui estão dois métodos:
1. setTimeout
Porque depois que o mouse se move sobre o elemento interno e aciona o evento onmouseout do elemento externo, o onmouseover do elemento externo também será acionado imediatamente, então só precisamos atrasar a ação que o evento onmouseout do elemento externo precisa executar por um curto período para rodar, e então executar o método clearTimeout no evento onmouseover, para evitar a interferência de evento causada pelo elemento interno.
Por favor, veja a figura a seguir para o processo específico de execução (linha pontilhada vertical representa o tempo):
Essa é uma abordagem inteligente, porque quando o onmouseout é acionado, o método substantivo não é executado imediatamente, mas espera por um curto período de tempo. Se o evento onmouseover for acionado imediatamente durante esse tempo, é basicamente certo que o evento onmouseout é acionado por interferência de elementos internos, então use clearTimeout no evento onmouseover para evitar que o método atrasado seja executado.
2. contém
Faça o seguinte julgamento ao passar o mouse e então execute o corpo do método quando o resultado for verdadeiro:
Faça o seguinte julgamento ao usar o onmouseout e então execute o corpo do método quando o resultado for verdadeiro:
Aqui está uma explicação do significado das duas linhas de código acima:
No IE, todos os elementos HTML possuem um método contain que determina se o elemento atual contém um elemento especificado. Usamos esse método para determinar se um evento de um elemento externo é desencadeado por um elemento interno e, se um elemento interno causar um evento indesejado, então ignoramos esse evento.
event.fromElement aponta para o elemento de onde o mouse sai quando os eventos onmouseover e onmouseout são acionados; event.toElement aponta para o elemento que o mouse entra quando os eventos onmouseover e onmouseout são acionados.
Portanto, o significado das duas linhas de código acima é:
- Quando o evento onmouseover é acionado, ele determina se o elemento deixado pelo mouse é um elemento interno do elemento atual e, se sim, ignora esse evento;
- Quando o evento onmouseout é acionado, julgue se o elemento inserido pelo mouse é um elemento interno do elemento atual e, se sim, ignore esse evento;
Dessa forma, o elemento interno não interfere nos eventos onmouseover e onmouseout do elemento externo.
Mas o problema é que, novamente, navegadores que não são IE não suportam a função contain, mas agora que sabemos a função da função contain, podemos adicionar o seguinte código para adicionar suporte a contain para navegadores que não sejam IE:
Os métodos acima não são compatíveis com o Firefox:
O ponto é o jQuery:
jQueryUse mouseleave em vez de mouseout, para que o que foi dito acima não aconteça.
Além disso, o mouseover será acionado repetidamente, é só usar mouseenter.
Solução perfeita~
|
Publicado em 17/12/2018 14:57:53
|
|
|
|
