3

Eu estou usando a função mouseleave para abrir uma popup quando o usuário mover o mouse para fora do site.

Esse é o código:

jQuery('body').mouseleave(function() {
            if (!jQuery('body').hasClass('leave-on') && localStorage.getItem("leave") != "closed") {
                jQuery('body').addClass('leave-on');
            }
        });

Mas eu tenho um problema com a trigger porque se eu clico no botão com a setinha para deslizar o slider, o mouseleave é disparado e a popup aparece.

Os botões que estão fazendo o mouseleave ativar:

os botões que estão fazendo o <code>mouseleave</code> ativar

1
  • Esse site está em português, então da próxima vez, por favor poste em português. Já traduzi a sua pergunta. Commented 21/07/2018 às 2:44

1 Resposta 1

2

Realmente ao clicar em um elemento o evento mouseleave é disparado. Seria isso um bug uma vez que o mouse não saiu do body? Ou o evento click esteja disparando o evento? Fiz uma breve pesquisa e vi comentários de que isso seria mesmo um bug, enfim...

Para resolver isso fiz este código que cancela o evento mouseleave ao clique e restaurando-o após um breve delay de dez milésimos de segundo (10ms). Esse delay é necessário porque se você restaurar o evento imediatamente ele será disparado de qualquer jeito.

Mas mudei o foco dos eventos ao document em vez do body, o que é mais interessante porque irá detectar o mouse saindo da área do documento em vez do body, o que não é a mesma coisa. O body da página é apenas onde a tag <body> possui conteúdo, já o document é a área toda da janela onde é exibida a página, independentemente se tem conteúdo ou não.

Comentei as linhas do if para não exibir erro no snippet por causa do localStorage. Ao copiar o código, descomente as linhas.

Veja:

jQuery(document).ready(function(){
   var t = jQuery(this);
   t.on("click", function(){
      t.off("mouseleave");
      setTimeout(function(){
         t.on("mouseleave", function(){
            console.log("saiu"); // apenas para ilustrar, pode remover esta linha
            //if (!jQuery('body').hasClass('leave-on') && localStorage.getItem("leave") != "closed") {
               // jQuery('body').addClass('leave-on');
            //}
         });
      }, 10);
   });
   // disparo o evento para ativar o mouseleave
   t.trigger("click");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Ao clicar na div abaixo o evento mouseleave não é disparado e o console.log não será exibido:
<div style="width: 50px; height: 50px; background: red;">Clique aqui</div>

5
  • eu estava lendo aqui e é algum problema em relação ao svg... esqueci de falar q pointer-events:none resolve o problema porém o botão não ficará mais funcional pois não aceitará o evento de click. dê uma olhada nesse tópico: stackoverflow.com/questions/13631598/… e stackoverflow.com/questions/24636602/…
    – Celso Sá
    Commented 21/07/2018 às 8:18
  • Qual é o código mesmo desse svg?
    – Sam
    Commented 21/07/2018 às 8:25
  • Testei nos outros svg da pagina e eles também ativam o popup ao colocar o mouse em cima... Exemplo de um svg que no caso é só um icone com um link: <svg class="icon-blog"> <use xlink:href="#blog"></use> </svg> Obs: apenas no mozilla que ocorre o problema de ativar o popup ao colocar o mouse em um svg como esse.
    – Celso Sá
    Commented 21/07/2018 às 8:38
  • Abre a popup apenas ao passar o mouse em cima, sem clicar?
    – Sam
    Commented 21/07/2018 às 9:24
  • exato... apenas no mozilla q ta ocorrendo isso
    – Celso Sá
    Commented 21/07/2018 às 19:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .