Mouseleave event not firing consistently in Firefox after focusout event

StackOverflow https://stackoverflow.com/questions/17322501

Question

I am running the following code:

<html>
<body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('html').on('mouseleave', function(e) {                                                    
            console.log('mouseleave');
        });   
        $('#text1').on('focusout', function () {
            alert("focusout");
            setTimeout(function(){$('#text1')[0].focus();},0);
        });
    });
    </script>
    <input type=text id="text1">
</body>
</html>

When I move the mouse up to the browser toolbar/tabs/links/etc area before I trigger the focusout event on the text input, the mouseleave event fires and I can press the refresh button or any other button/tab/etc.

However, after I trigger the focusout event, the mouseleave event no longer fires and the focusout prevents me from pressing any buttons in that area.

If I move the mouse off the document window of the browser to another application or the background or even down to the firebug window, the mouseleave event fires but not when I move the mouse to the browser toolbar/tabs/links/etc area.

However, if I manually click back into the text input, then the mouseleave starts firing normally again.

This behavior doesn't happen in IE, Chrome, or Safari, only in Firefox (I am using Firefox 21).

Any suggestions or explanations greatly appreciated!

Dana

Was it helpful?

Solution

After further investigation, this appears to be a Firefox issue rather than a jQuery issue because the mouseout event is also not firing properly in Firefox in this situation. I ended up working around all of this by using mousemove and checking for the target and relatedTarget of the event. When this situation happens (after the alert pops open) the mousemove event target is null and the related target is undefined only in the menu section of the page so by checking for that we know that we're in that section and we can handle it appropriately.

Here is the code we ended up using:

    $(document).on('mousemove', function(e) {
        if (!e.target.tagName && !e.relatedTarget) {
             console.log('mouseleave');
        }
    });

OTHER TIPS

Try to use:

document.addEventListener('mouseenter', function() {})
document.addEventListener('mouseleave', function() {})
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top