关于javascript：如何阻止在mouseenter / mouseleave上多次触发切换事件？


How to stop toggle event from being fired multiple times on mouseenter/mouseleave?

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

感谢！

两件事：

  • 如果要同时使用mouseenter和mouseleave，我建议使用hover()函数。和

  • 使用触发动画时，习惯使用stop()方法。

    • 所以：

    1
    2
    3
    4
    5
    $("div.someclass").hover(function() {
      $("...").stop().fadeIn("slow");
    }, function() {
      $("...").stop().fadeOut("slow");
    });

    注意：替换"..."有什么你拨动相应的选择和使用合适的效果(我使用褪色这里)。同样，事件处理程序中的this引用事件的源。

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

    1
    2
    3
    4
    5
    6
    $("div.someclass").on("mouseenter", function() {
      $("...").stop().fadeIn("slow");
    });
    $("div.someclass").on("mouseleave", function() {
      $("...").stop().fadeOut("slow");
    });

    这是一个jsFiddle示例：)

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

    但是请勿在鼠标事件上使用toggle ，例如，它很容易出错。鼠标在页面加载时位于元素上，或者鼠标离开浏览器(这可以使鼠标离开元素的边界而无需触发mouseout)。对于over具有单独的功能来显示内容，而out则将其隐藏。

    更好：只需使用hover()方法就可以了。