防止悬停触发事件两次

Question

我正在尝试在 div 悬停时发出警报。

我当前的代码是（对于名为 'testdiv' 的 div）

$(document).ready(function() {
    $("#testdiv").hover(function() {
        alert('1');
    });
});

这有效并显示警报，但在下一次鼠标移动时警报再次显示，即使我没有将鼠标悬停在 div?

一如既往的感谢，

Answer 1

这是因为如果只将一个处理函数传递给 hover()，它会同时用于 mouseenter 和 mouseleave 事件。要获得您想要的行为，请更改为仅使用 mouseenter：

$("#testdiv").mouseenter(function () {
    alert('1');
});

Answer 2

我相信你只想在这里举办 .mouseenter() 活动：

$("#testdiv").mouseenter(function() {
      alert('1');
});

Answer 3

您可以使用 $.one 事件来处理：

$(document).ready(function() {
  $("#testdiv").one("mouseenter",
    function() {
      alert('1');
    });
});

#testdiv {background: #ccf;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="testdiv">Hover Me!!!</div>

或者，如果我没有回答你的问题，你只需要使用 mouseenter 事件。

$(document).ready(function() {
  $("#testdiv").on("mouseenter",
    function() {
      alert('1');
    });
});

#testdiv {background: #ccf;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="testdiv">Hover Me!!!</div>

prevent hover from triggering event twice