jQuery mouseleave getting triggered on using scroll bar and right clicking

Question

jQuery mouseleave is getting triggered on right click in Chrome v41. This is not happening in Firefox.

Also mouseleave is getting triggered when using scroll bar in windows, again the problem doesn't exist in Firefox.

Is there something that needs to be taken care for Chrome?

Any help is greatly appreciated. Please do comment if more information is necessary.

This is how I am triggering the event.

$("body").on("mouseleave", function(){
     alert();
});

Answer 1

I have found a fix to your problem. Checkout this fiddle.

$("body").on("mousedown", function(e){
    if(e.which==3) 
    {
        $(this).addClass("right");
        console.log("From Right Click");
    }
}).on("mouseleave", function(e){
    if($(this).hasClass("right"))
    {
        console.log("it is right clicked");
        $(this).removeClass("right");  
        return;
    }
    alert();
     $(this).removeClass("right");  
     console.log(e.which+"From Mouseleave");
});

I have attached mousedown event with body which adds a class to the body when it is right clicked. mouseleave is called after mouseout in this example, so it checks if the class is still attached to the body. If true then it doesn't show any alert. (It is a fix not a solution :( )

Answer 2

You can solve this problem by checking the mouse position when the mouseleave event is triggered.

In my case, I only wanted the event to trigger if the mouse went above the document so I just checked the Y position of the mouse was < 0.

This also stops the event from triggering when the right mouse button is clicked.

Full details here: https://stackoverflow.com/a/29966853/2347456