Problem with jQuery mouseleave function for popup shooting

Asked

Viewed 130 times

3

I’m using the function mouseleave to open a popup when the user moves the mouse out of the site.

That is the code:

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

But I have a problem with Trigger because if I click the button with the arrow to slide the slider, the mouseleave is fired and the popup appears.

The buttons that are making the mouseleave activate:

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

javascript html jquery css

  • This site is in Portuguese, so next time, please post in Portuguese. I have already translated your question.

1 answer

2


Actually by clicking on an element the event mouseleave is fired. Would that be a bug once the mouse has not left the body? Or the event click is triggering the event? I did a brief survey and saw comments that this would actually be a bug, at last...

To solve this I made this code that cancels the event mouseleave by clicking and restoring it after a brief delay ten thousandths of a second (10 ms). This delay is necessary because if you restore the event immediately it will be triggered anyway.

But I changed the focus of events to document instead of the body, which is more interesting because it will detect the mouse leaving the document area instead of the body, which is not the same thing. The body page is just where the tag <body> has content, already the document is the entire area of the window where the page is displayed, regardless of whether it has content or not.

I commented on the lines of if not to display error in snippet because localStorage. When copying code, uncomment lines.

Behold:

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>

  • I was reading here and it’s some problem regarding svg... I forgot to mention q pointer-events:none solves the problem but the button will no longer be functional as it will not accept the click event. have a look at this topic: https://stackoverflow.com/questions/13631598/both-mouseleave-and-mouseout-triggering-too-often e https://stackoverflow.com/questions/24636602/mouseout-mouseleave-gets-fired-when-mouse-moves-insidthe-svg-pathelement

  • What is the same code of this svg?

  • I tested on the other page svg and they also activate the popup by putting the mouse on top... Example of a svg that in this case is just an icon with a link: <svg class="icon-blog">&#xA; <use xlink:href="#blog"></use>&#xA; </svg> Obs: only in Mozilla does the problem of activating the popup when placing the mouse in a svg like this occur.

  • Open the popup just by hovering the mouse above, without clicking?

  • exact... only in the Mozilla that this occurs

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.