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