为什么这两个事件应该只运行一次却重复触发？答案

【问题标题】：Why these two events triggered repeatedly when they should only run once?为什么这两个事件应该只运行一次却重复触发？
【发布时间】：2013-10-03 12:16:20
【问题描述】：

我写了下面的代码，当鼠标悬停在另一个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>

【问题讨论】：

对我来说很好jsfiddle.net/QaJp4。
当鼠标进入或离开（occordigly）相关标签时触发鼠标悬停和鼠标移出，或其后代之一

标签： jquery events triggers repeat

【解决方案1】：

您应该使用mouseenter 而不是mouseover，因为mouseover 总是在您将鼠标移入目标时触发。

此外，您应该添加stop() 以在用户快速移入和移出鼠标的同时停止fadeOut() 和fadeIn() 动画触发。

$('#my-div').on('mouseenter', function() {
   $('.tooltip').stop().fadeIn(300);
});
$('#my-div').on('mouseleave', function() {
   $('.tooltip').stop().fadeOut(300);
});

【讨论】：

【解决方案2】：

我发现了，问题是什么，我使用 Coda，它似乎有奇怪的错误，我在所有其他浏览器上尝试过，它工作正常。我编写了这段代码，它似乎在主流浏览器上运行良好，但由于某种原因 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;
        }

【讨论】：

【解决方案3】：

您希望 mouseout 的行为与 mouseleave 相同。

mouseleave 和 mouseout 相似，但不同之处在于 mouseleave 不气泡和 mouseout 可以。这意味着当指针离开元素及其所有后代时触发 mouseleave，而当指针离开元素或离开元素的后代之一时触发 mouseout（即使指针仍在元素内）。 (MDN)

mouseover Vs mouseenter 几乎相同

查看mouseover 被触发的频率（注意计数器），当您将红色容器悬停在下面时，它包含的文本如下：

let $p = $('p').eq(0)
    , $tooltip = $('.tooltip').eq(0)
;

$('#target')
  .on('mouseover', () => {
    // Counting fired mouseover events
    $p.text((+$p.text() || 0)+1);
    $tooltip.fadeIn(300);
  })

  .on('mouseleave', () => {
    $tooltip.fadeOut(300);
  });

#target {width: 50px; height: 50px; background-color: red;}
.tooltip {width: 100px; height: 50px; background-color: red; display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="target"><div>Test</div></div>
<div class="tooltip"></div>
<p></p>

【讨论】：