焦点事件后，Firefox中的Mouseleave事件无法持续触发 [英] Mouseleave event not firing consistently in Firefox after focusout event
问题描述
我正在运行以下代码:
<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>
当我在文本输入上触发聚焦事件之前，将鼠标移至浏览器工具栏/选项卡/链接/etc区域时，将触发mouseleave事件，并且可以按下刷新按钮或任何其他按钮/选项卡/etc .
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.
但是，在触发聚焦事件之后，mouseleave事件不再触发，并且聚焦使我无法按下该区域中的任何按钮.
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.
如果我将鼠标从浏览器的文档窗口移至另一个应用程序或背景，甚至移至Firebug窗口，则将触发mouseleave事件，但当我将鼠标移至浏览器的工具栏/标签/链接/等时不会触发区域.
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.
但是，如果我手动单击返回到文本输入，则mouseleave会再次正常触发.
However, if I manually click back into the text input, then the mouseleave starts firing normally again.
仅在Firefox(我使用的是Firefox 21)中，在IE，Chrome或Safari中不会发生此行为.
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
推荐答案
经过进一步调查，这似乎是Firefox问题，而不是jQuery问题，因为在这种情况下，mouseout事件在Firefox中也无法正常触发.最后，我通过使用mousemove并检查了事件的target和relatedTarget来解决了所有这些问题.当这种情况发生时(警报弹出后)，mousemove事件目标为null，而相关目标仅在页面的菜单部分中未定义，因此通过检查我们知道我们在该部分中，我们可以对其进行处理适当地.
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');
}
});
这篇关于焦点事件后，Firefox中的Mouseleave事件无法持续触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
