Problem with "mouseleave" and its reaction with SVG images

Question

On the site there is a popup that in case should only appear when the person takes the mouse from the site area. But it was appearing when clicking a button that

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

So here at stackoverflow itself they helped me solve On this topic

But then I came across a new problem that still occurs with the same images or svg buttons. But now only happens in Firefox, and when you hover over such SVG the mouseleave is already fired, but in Chrome no.

Example of a SVG code that happens the problem:

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

In java script there is also this, which I don’t know if it might be causing the problem as well:

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;
}
});

Answer 1

This may be a Firefox bug, since in all other browsers the behavior is normal, even with svg elements.

Like the event mouseleave is fired while hovering over svg, the solution I found is to check if the name of the event.target is equal to svg or use. To get the name of the target element (element that triggered the event) you take the property nodeName, that is to say, event.target.nodeName.

This can prevent you from executing code within the event mouseleave added a 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");
});

Take the example (if possible, run in 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>