Problem with mouseleave and its reaction with SVG images

Question

Problem with mouseleave and its reaction with SVG images

Navigation

#1 by (0 votes)

0

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

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

So here in stackoverflow itself they helped me resolve In this topic

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

Sample code for an SVG problem:

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

In the java script there is also this, I do not know if it might be causing the problem too:

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

javascript html css svg

asked by anonymous 22.07.2018 / 23:56

1 answer

Positioning Controls HeaderView (NavigationView) Back button deletes fragment in main activity

score 0 · Answer 1

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

As the mouseleave event is triggered by passing the mouse over svg, the solution I found is to check whether the event.target name is equal to svg or use . To get the name of the target element (element that triggered the event) you get the property nodeName , that is, event.target.nodeName .

With this you can prevent from executing the code inside 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");
});

See 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><svgwidth="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>