Fui exposto ao evento OnMouseOver e no evento OnMouseOut nos últimos dois dias. Eu sempre pensei que eles estavam simplesmente desencadeando eventos quando o ponteiro do mouse se moveu para o elemento e desencadeando eventos quando o ponteiro do mouse saiu do objeto especificado. Mas de repente descobri que essas são apenas descrições simples deles. Afinal, vamos dar uma olhada neles juntos, afinal, eles ainda têm características estranhas. Isso é bom ou ruim?
Primeiro implemente uma caixa:
Ligue o evento OnMouseOver e o OnMouseout Event nesta caixa
Descubra que nada vai acontecer com eles e então (hehe, você sabe!)
Vamos criar um elemento B, para que seja aninhado no elemento A como um elemento filho de um
Ainda ligamos apenas o evento OnMouseOver e o OnMouseout Event ao elemento pai externo A. O que você descobrirá? Sim, está certo! Quando o mouse se move e remove o elemento infantil B de A, o evento OnMouseOver e o evento OnMouseOut também ocorrem! ! Por que? Não é isso que eu quero! B não faz parte de A neste momento? É claro que não, caso contrário, o evento OnMouseOver não ocorrerá quando o elemento B for movido. Isso prova que o elemento B ainda é parte integrante de A.
Então o que está acontecendo? Afinal, o incidente está cometendo um erro? Todo mundo sabe que existem dois tipos de fluxos de eventos em navegadores comumente usados: bolhas de eventos e captura de eventos. Vejamos a definição de bolhas de eventos: os eventos são propagados passo a passo da meta de evento mais específica até o destino de eventos menos específico (objeto de documento). Portanto, quando o mouse se move e remove o elemento infantil B de A, o evento OnMouseOver de B e o evento OnMouseOut será acionado, mas não possui esses dois eventos, por isso passa esses dois eventos para o elemento pai A. A tem esses dois eventos, para que a situação que vemos acontecer.
Algumas pessoas dirão como evitá -lo. Afinal, nem todo mundo tem esse tipo de demanda. Só precisamos do evento de elemento pai para acionar e deixar o elemento filho ser silenciosamente um homem bonito.
Portanto, o W3C adiciona atributos RelatedTarget nos eventos MouseOver e Mouseout:
• No evento MouseOver, indica qual elemento o mouse vem de
• No evento do mouseout, aponta para o elemento que o mouse vai para
No entanto, a Microsoft adicionou dois atributos aos eventos de MouseOver e MouseOut
• FromElement, no evento MouseOver, indica qual elemento o mouse vem
• toelement, o elemento que aponta para o mouse no evento MouseOut
Então, temos a seguinte implementação de código
Document.getElementById ('Box1'). E.RelatedTarget: e.FromElement; while (reltg && reltg! = this) reltg = reltg.parentNode; if (reltg! = this) {// aqui você pode escrever o código de processamento para o OnMouseEnter Event Alert ('111');}} document.getElementbyId ('Box1'). Window.Event; var rel Reltg = E.RelatedTarget? E.RelatedTarget: e.toElement; while (reltg && reltg! = this) reltg = reltg.parentnode; if (reltg! = this) {// aqui você pode escrever o código de processamento de eventos OnMouseleave Alert ('2222');}}}}}}}}}}O exposto acima é um entendimento abrangente do incidente de OnMouseOver e do Incidente OnMouseout apresentado a você pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!