0

No site há um popup que no caso só deve aparecer quando a pessoa tirar o mouse da área do site. Mas estava aparecendo ao clicar em um button que

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

Então aqui no próprio stackoverflow me ajudaram a resolver Neste tópico

Mas então me deparei com um novo problema que ainda ocorre com as mesmas imagens ou botões svg. Porém agora só acontece no Firefox, e ao passar o mouse em cima de tal SVG o mouseleave já é disparado, mas no Chrome não.

Exemplo de código de um SVG que acontece o problema:

<svg class="icon-blog"> <use xlink:href="#blog"></use> </svg>

No java script há também isso, que não sei se pode estar causando o problema também:

var setInnerHTML = createMicrosoftUnsafeLocalFunction(function (node, html) {
// IE does not have innerHTML for SVG nodes, so instead we inject the
// new markup in a temp node and then move the child nodes across into
// the target node
if (node.namespaceURI === DOMNamespaces.svg && !('innerHTML' in node)) {
reusableSVGContainer = reusableSVGContainer ||
document.createElement('div');
reusableSVGContainer.innerHTML = '<svg>' + html + '</svg>';
var svgNode = reusableSVGContainer.firstChild;
while (svgNode.firstChild) {
  node.appendChild(svgNode.firstChild);
}
} else {
node.innerHTML = html;
}
});
0

1 Resposta 1

0

Isso pode ser um bug do Firefox, já que em todos os outros navegadores o comportamento é normal, mesmo com elementos svg.

Como o evento mouseleave é disparado ao passar o mouse sobre o svg, a solução que encontrei é verificar se o nome do event.target é igual a svg ou use. Para pegar o nome do elemento-alvo (elemento que disparou o evento) você pega a propriedade nodeName, ou seja, event.target.nodeName.

Com isso você pode impedir de executar o código dentro do evento mouseleave adicionado um if:

jQuery(document).ready(function(){
   var t = jQuery(this);
   t.on("click", function(){
      t.off("mouseleave");
      setTimeout(function(){
         t.on("mouseleave", function(e){
            if(e.target.nodeName != "svg" && e.target.nodeName != "use"){
               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");
});

Veja o exemplo (se possível, execute no Firefox):

jQuery(document).ready(function(){
   var t = jQuery(this);
   t.on("click", function(){
      t.off("mouseleave");
      setTimeout(function(){
         t.on("mouseleave", function(e){
            if(e.target.nodeName != "svg" && e.target.nodeName != "use"){
               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>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .classA { fill:red }
  </style> 
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>
 
  <use x="50" y="10" xlink:href="#Port" />
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>

6
  • Continua o problema... Se quiser ver o site, é o seguinte: vanniksemijoias.com.br
    – Celso Sá
    Commented 24/07/2018 às 22:23
  • Vou dar uma olhada...
    – Sam
    Commented 24/07/2018 às 22:29
  • Corrigi o código. Tinha um erro, eu estava usando $ em vez de jQuery
    – Sam
    Commented 24/07/2018 às 23:24
  • Continuou o problema no Firefox :s
    – Celso Sá
    Commented 30/07/2018 às 2:03
  • Pois é, realmente não sei o que fazer. Acredita que fiquei até horas testando esse seu caso? Acho que nesses casos a minimização do problema já vale a pena. Imagine que o Firefox, apesar de ser um navegador muito bom, fica bem abaixo do Chrome em uso. Então deixa como está e podemos ir buscando com o tempo uma solução definitiva. Vou até deixar agendado aqui essa questão para depois me dedicar um bom tempo mais pra tentar resolver por completo.
    – Sam
    Commented 30/07/2018 às 2:07

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 .