如何在mouseenter / mouseleave上多次停止触发切换事件？ [英] How to stop toggle event from being fired multiple times on mouseenter/mouseleave?

问题描述

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

I'm using jQuery to toggle the visibility of a <div> using the jQuery toggle method. The toggle is fired on the mouseenter and mouseleave event, thus creating the effect of the div to fold out on mouseenter and fold in on mouseleave. Problem is, if the user drags the mouse over the <div> a few times and then leaves the <div>, the div will toggle in and out several times. This can happen if the user accidentally moves around the mouse pointer in the <div> are. Do anyone have any idea on how I can avoid this behavior?

Thanx！

推荐答案

两件事：

1. 如果你打算同时使用 mouseenter 和 mouseleave 我建议使用 hover（） 功能;和

1. If you're going to use both mouseenter and mouseleave I'd suggest using the hover() function; and

使用触发动画时，习惯使用 stop（） 方法。

When using triggered animations it's a good habit to get into to use the stop() method.

所以：

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

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

Note: replace "..." with the appropriate selector for what you're toggling and use the appropriate effect (I'm using fade here). Also, this in an event handler refers to the source of the event.

这篇关于如何在mouseenter / mouseleave上多次停止触发切换事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！