如何阻止在 mouseenter/mouseleave 上多次触发切换事件？答案

【问题标题】：How to stop toggle event from being fired multiple times on mouseenter/mouseleave?如何阻止在 mouseenter/mouseleave 上多次触发切换事件？
【发布时间】：2011-02-06 01:11:16
【问题描述】：

我正在使用 jQuery 使用 jQuery 切换方法来切换 <div> 的可见性。在 mouseenter 和 mouseleave 事件上触发切换，从而创建 div 在 mouseenter 上折叠并在 mouseleave 上折叠的效果。问题是，如果用户在<div> 上拖动鼠标几次然后离开<div>，则 div 将多次进出。如果用户不小心在<div> 中移动鼠标指针，就会发生这种情况。有人知道如何避免这种行为吗？

谢谢！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

除了 Cletus 的正确答案之外，我想指出使用 mouseenter 和 mouseleave 事件并没有错。这个技巧只存在于stop() 方法中，实际上我们仍然可以这样做：

$("div.someclass").on("mouseenter", function() {
  $("...").stop().fadeIn("slow");
});
$("div.someclass").on("mouseleave", function() {
  $("...").stop().fadeOut("slow");
});

Here 是一个 jsFiddle 示例 :)

【讨论】：

【解决方案2】：

您可以使用更常见的mouseover/mouseout 事件来获取不会在内部鼠标移动时触发的悬停事件。

但是不要在鼠标事件上使用toggle，如果例如，它很容易出错。页面加载时鼠标在元素上，或者鼠标离开浏览器（这可以让鼠标离开元素的边界而不触发mouseout）。对 over 显示内容和隐藏内容的 out 有单独的功能。

更好：只需使用专门用于此目的的 hover() 方法。

【讨论】：

【解决方案3】：

两件事：

如果您打算同时使用mouseenter 和mouseleave，我建议使用hover() 函数；和
使用触发动画时，养成使用stop() 方法的好习惯。

所以：

$("div.someclass").hover(function() {
  $("...").stop().fadeIn("slow");
}, function() {
  $("...").stop().fadeOut("slow");
});

注意：用适当的选择器替换@ 987654328，用于您正在切换并使用适当的效果（我在这里使用淡入淡出效果）。此外，事件处理程序中的this 指的是事件的来源。

【讨论】：