Question

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

感谢名单！

Answer 1

两件事：

如果您要同时使用mouseenter和mouseleave，我建议您使用hover()功能;以及
使用触发动画时，习惯使用stop()方法是个好习惯。

所以：

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

注意：用适当的选择器替换"..."，以便切换你正在切换的内容并使用相应的效果（我在这里使用淡入淡出）。此外，事件处理程序中的this引用事件的来源。

Answer 2

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

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

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

Answer 3

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

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

Here是一个jsFiddle示例：）

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

3 个答案: