4

我正在运行以下代码：

<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 事件之前将鼠标向上移动到浏览器工具栏/选项卡/链接/等区域时，mouseleave 事件会触发，我可以按下刷新按钮或任何其他按钮/选项卡/等。

但是，在我触发 focusout 事件后，mouseleave 事件不再触发，并且 focusout 会阻止我按下该区域中的任何按钮。

如果我将鼠标从浏览器的文档窗口移到另一个应用程序或背景，甚至移到萤火虫窗口，mouseleave 事件会触发，但当我将鼠标移到浏览器工具栏/选项卡/链接/等区域时不会触发。

但是，如果我手动单击返回文本输入，则 mouseleave 会再次开始正常触发。

这种行为不会在 IE、Chrome 或 Safari 中发生，只会在 Firefox 中发生（我使用的是 Firefox 21）。

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

达纳

4

2 回答 2

3

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

这是我们最终使用的代码：

    $(document).on('mousemove', function(e) {
        if (!e.target.tagName && !e.relatedTarget) {
             console.log('mouseleave');
        }
    });
于 2013-06-28T17:24:58.623 回答
0

尝试使用：

document.addEventListener('mouseenter', function() {})
document.addEventListener('mouseleave', function() {})
于 2021-07-27T11:27:03.060 回答