Descrição do problema
Espero que, quando o mouse se mover para ID1, o ID2 seja exibido e quando o mouse sair ID1, ID2 será exibido. As perguntas são as seguintes:
1. Quando o mouse se move de ID1 para ID2, o ID muda de exibição para não exibir e depois muda para exibir
2. Quando o mouse se move de ID2 para ID1, a exibição de ID2 se torna não display e depois se torna exibida
O que eu quero é que, quando o mouse se move no ID1 ou ID2, o ID2 continuará aparecendo sem mudar.
<script type = "text/javascript" src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javascript"> $ ("#id1"). mouseover (function () {$ (this) .children (). fadein (1000);}). mouseout (function () {$ (this) .children (). fadeout (1000);}); </script>Solução problemática
A análise inicial do problema foi que, quando o mouse passou do ID1 para o ID2, o mouse deixou do ID2 para o ID1 e um evento do MouseOut foi acionado para ID1, de modo que a exibição do ID2 se tornou não display. Em seguida, o mouse mudou -se para o ID2 e um evento MouseOver foi acionado no ID2. Devido ao mecanismo de bolhas, antes do mouseOver no ID2 borbulhar para o ID1, o evento MouseOver no ID1 foi acionado e, em seguida, o ID2 mudou de não exibir para exibir. Da mesma forma, quando o mouse se move de ID2 para ID1, um evento de mouseOut é acionado para ID2. Ou é por causa do mecanismo de bolha que o evento MouseOut é transmitido para o ID1 e as alterações ID2 da exibição para a não exibição. Depois que o mouse se move para o ID1, um evento de mouseOver é acionado e, em seguida, o ID2 não é exibido para ser exibido.
Parece que o problema acima precisa ser resolvido bloqueando o mouse fora do ID1 quando o mouse se move de ID1 para ID2; Quando o mouse se move de ID2 para ID1, bloqueando o mouse fora do ID2 de ID2 para ID1, impedindo que o mouse fora do ID2 borbulhou acima do ID1. Então o problema não pode ser resolvido apenas prevenindo bolhas.
Para resolver esses problemas, o jQuery fornece métodos de mouseEnter e mouseleave. Portanto, o código JS é alterado para o seguinte, que resolveu o problema muito bem.
$ ("#id1"). mouseEnter (function () {$ (this) .Children (). Fadein (1000);}). mouseleave (function () {$ (this) .children ().Muitos lugares apresentam MouseEnter, Mouseleable, MouseOver e MouseOut, então copiei e colei um.
/******************************************************
1.MouseOver e MouseEnter
O evento MouseOver é desencadeado, independentemente de o ponteiro do mouse passar pelo elemento selecionado ou seu elemento filho.
O evento MouseEnter só será acionado quando o ponteiro do mouse passar pelo elemento selecionado.
2.MouseOut e mouseleable
O evento MouseOut será acionado, independentemente de o ponteiro do mouse deixar o elemento selecionado ou qualquer elemento filho.
O evento Mouseleave será acionado apenas quando o ponteiro do mouse deixar o elemento selecionado.
/******************************************************
O fenômeno é realmente esse fenômeno, mas o processo é um pouco vago. Meu entendimento é o seguinte:
Quando o ponteiro do mouse se move para o elemento selecionado, o evento MouseOver será acionado. Todo mundo sabe que quando o ponteiro do mouse se move do elemento selecionado para o elemento filho, o evento MouseOut do elemento selecionado será acionado primeiro e, em seguida, o evento MouseOver do elemento filho será borbulhado para o elemento selecionado. Neste momento, é equivalente ao elemento selecionado primeiro executando um evento do MouseOut e depois executando um evento MouseOver.
Para verificação, altere o código para o seguinte
<script type = "text/javascript" src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javascript"> $ ("#id1"). mouseOver (function () {// $ (this) .children (). fadein (1000); console.log ('a');})Mova o mouse da página para ID1 e depois passe de ID1 para ID2, a saída do console é a seguinte
Pode -se observar que o ID1 chamou os eventos MouseOver, MouseOut e MouseOver, que são exatamente os mesmos que o analisado acima.
Análise de implementação de mouseenter e mouseleave
Análise de princípios
A partir da análise acima, podemos ver que, para alcançar o efeito do MouseEnter e Mouseleable, quando o mouse se move do elemento selecionado para o elemento filho, o elemento selecionado não executa o evento do mouseOut, nem executa o evento MouseOver que a subclasse bolhas. Quando o mouse se move do elemento criança selecionado para o elemento selecionado, o elemento selecionado não executa o evento MouseOver, nem executa o evento MouseOut que a subclasse bolhas.
Para alcançar o efeito acima, precisamos de um alvo relacionado a atributos do objeto de eventos, usado para julgar os atributos dos nós relacionados dos nós de destino do evento MouseOver e MouseOut. Simplificando, quando o evento MouseOver é acionado, o atributo RelatedTarget representa o nó que o mouse acaba de deixar e, quando o evento MouseOut é acionado, ele representa o objeto para o qual o mouse se move. Como a MSIE não suporta essa propriedade, ela substituiu as propriedades, a saber, do elemento e do ensino médio. Além disso, também precisamos do método contém para determinar se um objeto está contido em outro objeto.
Dessa forma, quando o mouse se move, você precisa julgar os dois seguintes
1. Ligue para o MouseOver, você só precisa determinar se o alvo relacionado é um elemento filho do elemento selecionado. Nesse caso, ele não será executado (ao passar do elemento filho do elemento selecionado para o elemento selecionado, o MouseOver não será executado; ao passar do elemento selecionado para o elemento Child, elemento infantil selecionado, o Bubled MouseOver não será executado);
2. Ligue para o MouseOut, você só precisa determinar se o elemento filho do alvo relacionado está selecionado. Nesse caso, ele não será executado (ao passar do elemento infantil do elemento selecionado para o elemento selecionado, o mouseout borbulhou do elemento filho não é executado; ao passar do elemento selecionado para o elemento criança selecionado, o MouseOver não é executado);
Processo de implementação
Determinar se existe uma relação de inclusão entre dois elementos
A função contém é encapsulada no jQuery da seguinte forma
Pode ser simplificado da seguinte forma
// julga se os dois A contém Bfunction contém (a, b) {retorna a.contains? a! = b && a.contains (b): !! (a.comparedocumentPosition (b) e 16);}Introdução à comparação do documento
Este método faz parte da especificação DOM Nível 3, permitindo determinar a posição mútua entre os 2 nós DOM. Este método é mais poderoso que .Contains (). Uma aplicação possível desse método é classificar os nós DOM em uma ordem detalhada e precisa. As informações retornadas por nodea.comparedocumentPosition (NodeB) são descritas da seguinte forma:
Significado de número de bits
Através do exposto, podemos entender por que devemos escrevê -lo como a.comparedocumentPosition (b) e 16 porque, se o nó A contiver o nó B, 16 será retornado, 16 e 16 = 1 serão retornados e os resultados serão 0 em outros casos.
Obtenha o RelatedTarget para compatibilidade
Para ser compatível com vários navegadores, consulte o código -fonte jQuery, escreva o código a seguir para obter os atributos RelatedTarget dos nós de destino de eventos MouseOver e MouseOut.
function getRelated (e) {var relacionado; var tipo = e.type.TolowerCase (); // Obtenha o nome do evento aqui se (type == 'mouseOver') {relacionado = e.RelatedTarget || e.FromElement} else (type = 'mouseout') {Related = E.RelatedTarget | }Melhore o MouseOver e o MouseOut
Melhore o MouseOver e o MouseOut para obter efeitos aprimorados do mouseEnter e da mouseleave, todos os códigos são os seguintes.
<!DOCTYPE html><html><head><title></title></head><body><div id="id1"><div id="id2"></div></div><script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script><script type = "text/javascript"> // julga se dois a contém bfunction contém (a, b) {return a.contains? a! = b && a.contains (b): !! (a.comparedocumentPosition (b) e 16);} função getRelated (e) {var relacionado; var type = e.type.TolowerCase (); // Obtenha o nome do evento aqui se (type == 'mouseOver') {Related = e.elatedTarget | if (type = 'mouseout') {relacionado = e.RelatedTarget || e.toElement} retornar relacionado; }$(function(){$("#id1").mouseover(function(e){//Defend where the mouse moves to id1 var related=getRelated(e); //If related is the child element id2 of id1, that is, it moves from child element id2 to id1, or it is related to id1, that is, it moves from id1 to its child element id2, then no operation is performed, otherwise the corresponding operation is executado se (this! = Related &&! Elemento, nenhuma operação é realizada; caso contrário, a operação correspondente é realizada se (this! = Related &&!Teste, rota de movimento do mouse, como mostrado no diagrama a seguir
Como pode ser visto no console, o MouseOver e o MouseOut neste momento têm efeitos totalmente equipados com mouseenter e mouseleave.
Encapsulamento do código
Se você precisar carregar o jQuery ou escrever muitos representantes toda vez que executar essa operação, será uma tarefa tediosa. Para facilitar as operações futuras, é realizada uma embalagem apropriada, o jQuery simulado e gerar seu próprio mouseenter e mouseleave. O código é encapsulado no arquivo DQMouse.js, como segue:
(function (w) {var dqmouse = function (obj) {// função corpo retorna new dqmouse.fn.init (obj);} dqmouse.fn = dqMouse.protype = {// protótipo estendido objecj: null, thisqMouse: "1.0.0", init: funcionar: funcionar (// Este;}, contém: function (a, b) {return a.contains? if (type == 'mouseOver') {relacionado = e.RelatedTarget || e.FromElement} else if (type = 'mouseout') {relacionado = e.RelatedTarget || e.toElement} Return Related; Relacionado = _self.getRelated (e); ! _self.contains (obj, relacionado)) {fn ();}} return _self;}} dqmouse.fn.init.prototype = dqmouse.fn; window.dqmouse = window. $$ = dqmouse;}) (janela);O arquivo de origem chamado é o seguinte:
<div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javascript" src = "dqmouse.js"> </script> <script type = "text/javascript"> var " id1 = document.getElementById ('id1'); $$ (id1) .over (function () {console.log ('mouseOver');}). out (function () {console.log ('mouseout');}); </script>O exposto acima é o conteúdo relevante sobre como resolver o problema do MouseOver e do MouseOut, acionando várias vezes no JS que o editor apresentou a você. Espero que seja útil para todos!