Question

我正在运行以下代码：

<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>

当我在文本输入上触发focusout事件之前将鼠标移动到浏览器工具栏/ tabs / links / etc区域时，mouseleave事件会触发，我可以按下刷新按钮或任何其他按钮/标签/等。

然而，在我触发focusout事件后，mouseleave事件不再触发，焦点输出阻止我按下该区域中的任何按钮。

如果我将鼠标从浏览器的文档窗口移动到另一个应用程序或背景，甚至向下移动到firebug窗口，mouseleave事件会触发，但不会在我将鼠标移动到浏览器工具栏/ tabs / links / etc时触发区域。

但是，如果我手动单击返回文本输入，则mouseleave将再次正常启动。

此行为不会在IE，Chrome或Safari中发生，仅在Firefox中发生（我使用的是Firefox 21）。

非常感谢任何建议或解释！

达纳

Answer 1

经过进一步调查后，这似乎是一个Firefox问题而不是jQuery问题，因为在这种情况下，mouseout事件在Firefox中也无法正常启动。我最后通过使用mousemove并检查事件的目标和relatedTarget来解决所有这些问题。当这种情况发生时（警报弹出打开后），mousemove事件目标为空，并且相关目标仅在页面的菜单部分中未定义，因此通过检查我们是否知道我们在该部分并且我们可以处理它适当。

以下是我们最终使用的代码：

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

Answer 2

尝试使用：

document.addEventListener('mouseenter', function() {})
document.addEventListener('mouseleave', function() {})

在焦点输出事件后，Mouseleave事件在Firefox中不会始终触发

2 个答案: