Jquery 为什么这两个事件应该只运行一次，却会反复触发？_Jquery_Events_Triggers_Repeat

Jquery 为什么这两个事件应该只运行一次，却会反复触发？

jquery events triggers

Jquery 为什么这两个事件应该只运行一次，却会反复触发？,jquery,events,triggers,repeat,Jquery,Events,Triggers,Repeat,我已经写了下面的代码，当鼠标移到另一个div上时，应该显示一个div，代码可以工作，但是，事件会被反复触发为什么 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #my-div { width: 100px;

我已经写了下面的代码，当鼠标移到另一个div上时，应该显示一个div，代码可以工作，但是，事件会被反复触发为什么

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #my-div {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .tooltip {
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;
            }
        </style>
        <script src="jquery.min.js"></script>
    </head>

    <body>
        <div id="my-div"></div>
        <div class="tooltip"></div>
        <script type="text/javascript">
                    $('#my-div').on('mouseover', function() {
                        $('.tooltip').fadeIn(300);
                    });
                    $('#my-div').on('mouseleave', function() {
                        $('.tooltip').fadeOut(300);
                    });

        </script>
    </body>
</html>


#我的部门{
宽度：100px；
高度：100px；
背景色：红色；
}
.工具提示{
宽度：200px；
高度：200px；
背景色：红色；
显示：无；
}
$（'my div'）。on（'mouseover'，function（）{
$（'.tooltip'）.fadeIn（300）；
});
$（'my div'）。on（'mouseleave'，function（）{
$（'.tooltip'）.fadeOut（300）；
});

我发现了问题所在，我使用了Coda，它似乎有奇怪的bug，我在所有其他浏览器上都试用过，效果不错。我编写了这段代码，它在主要浏览器上似乎运行良好，但出于某种原因，Coda拒绝正确运行它：

        function Tooltip() {

            this.showToolTip = function() {
                $(this.element).on('mouseenter', function(event) {
                    event.preventDefault();
                    $(that.tooltip).stop().fadeIn(300);
                });
            };

            this.hideToolTip = function() {
                $(this.element).on('mouseleave', function(event) {
                    event.preventDefault();
                    $(that.tooltip).stop().fadeOut(300);
                });
            };

            this.element = arguments[0];
            this.tooltip = arguments[1];
            var that = this;
        }

您希望mouseout的行为与mouseleave相同

mouseleave和mouseout相似，但不同之处在于mouseleave不冒泡，mouseout冒泡。这意味着，当指针退出元素及其所有子体时，将触发mouseleave，而当指针离开元素或元素的一个子体时（即使指针仍在元素内），将触发mouseout。（）

几乎同样的情况也适用于

查看鼠标悬停在红色容器及其包含的文本上时鼠标悬停的频率（注意计数器）：

let$p=$（'p'）.eq（0）
，$tooltip=$（'.tooltip'）.eq（0）
;
$（“#目标”）
.on（'mouseover'，（）=>{
//计数触发的鼠标悬停事件
$p.text（+$p.text（）| | 0）+1）；
$tooltip.fadeIn（300）；
})
.on（'mouseleave'，（）=>{
$tooltip.fadeOut（300）；
});
#目标{宽度：50px；高度：50px；背景色：红色；}
.tooltip{宽度：100px；高度：50px；背景色：红色；显示：无；}

试验
您应该使用mouseenter
而不是mouseover
，因为在目标中移动鼠标时总是触发mouseover

要了解更多信息，您应该添加stop（）
以停止fadeOut（）
和fadeIn（）
动画触发器，同时用户快速移入移出鼠标
$('#my-div').on('mouseenter', function() {
   $('.tooltip').stop().fadeIn(300);
});
$('#my-div').on('mouseleave', function() {
   $('.tooltip').stop().fadeOut(300);
});

对我来说效果很好。鼠标进入或离开（偶然）相关标记或其后代时，会触发Mouseover和mouseout