Javascript Firefox中jQuery Mouseenter/Mouseleave存在问题_Javascript_Jquery_Firefox_Mouseleave_Mouseenter

Javascript Firefox中jQuery Mouseenter/Mouseleave存在问题

javascript jquery firefox

Javascript Firefox中jQuery Mouseenter/Mouseleave存在问题,javascript,jquery,firefox,mouseleave,mouseenter,Javascript,Jquery,Firefox,Mouseleave,Mouseenter,我对仅在Firefox中的mosueenter/mouseleave事件有问题 $（文档）.ready（函数（）{ $（“#theDiv”）.mouseenter（函数（）{ $（“#输出”）.append（'mouseenter'）； }); $（“#theDiv”）.mouseleave（函数（）{ $（“#输出”）.append（'mouseleave'）； }); }); 内容内容内容内容内容内容内容内容内容内容内容内容我只想知道鼠标何时离开包含DIV的分区

我对仅在Firefox中的mosueenter/mouseleave事件有问题


$（文档）.ready（函数（）{
$（“#theDiv”）.mouseenter（函数（）{
$（“#输出”）.append（'mouseenter
'）；
});
$（“#theDiv”）.mouseleave（函数（）{
$（“#输出”）.append（'mouseleave
'）；
});
});
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

我只想知道鼠标何时离开包含DIV的分区。但是，如果您将鼠标快速移动到文本框上，或者将鼠标移动到div的滚动条上，则会触发事件

--编辑--

$（“#theDiv”）.悬停（函数（）{
$（“#输出”）.append（'hoverin
）；
}，函数（）{
$（“#输出”）.append（'hoverout
）；
});

我用hover尝试了以下方法。

似乎只有在Firefox中才会遇到同样的问题。

我几乎总是发现，如果您计划在鼠标进入和离开元素时同时执行这两项操作，那么最好使用该方法或插件，而不是使用单独的mouseenter/mouseleave处理程序。这两种方法似乎都能处理可能的鼠标移动事件，而不仅仅是映射到mouseenter/mouseleave上。

这种行为与Firefox 3.6中已修复的鼠标移动事件有关。jQuery试图用WithineElement函数（通过jQuery源代码搜索）处理此错误，但解决方案并不完美。

显然，此错误只出现在Firefox 3.5.7中，无法在Firefox 3.6中重现。我在FF 3.5.8中也有此错误行为。嗯，没有快速修复。。。FF16现在。。仍然相同：(

<HTML>
    <HEAD>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.js"></script>
        <script>
            $(document).ready(function() {
                $("#theDiv").mouseenter(function() {
                    $("#output").append('mouseenter<br>'); 
                });
                $("#theDiv").mouseleave(function() {
                    $("#output").append('mouseleave<br>');
                });
            });

        </script>
    </HEAD>
    <BODY>

    <div id="theDiv" style="position:relative; height: 300px; width:300px; background-color:Black;">
        <input type="text" style="position:absolute; top: 40px;" />

        <div style="position:absolute; top:100px; height:100px; width:100px; background-color:Red; overflow:auto;">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        </div>
    </div>

    <div id="output"></div>

    </BODY>
</HTML>

$("#theDiv").hover(function() {
    $("#output").append('hoverin<br>');
}, function() {
    $("#output").append('hoverout<br>');
});