javascript - How to stop toggle event from being fired multiple times on mouseentermouseleave? - Stack Overflow

admin管理员组

文章数量:1305164

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!

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!

• javascript
• jquery

Share Improve this question Follow edited Apr 9, 2010 at 8:28 bobince 537k110110 gold badges671671 silver badges843843 bronze badges asked Apr 9, 2010 at 8:20 Tomas VinterTomas Vinter 2,69199 gold badges3636 silver badges4545 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Two things:

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

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

So:

$("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.

You can use the more mon mouseover/mouseout events to get a hover event that doesn't fire on internal mouse movements.

But don't use toggle on a mouse event, it can easily go wrong if eg. the mouse is over the element at page load time, or the mouse leaves the browser (which can allow the mouse to leave the bounds of the element without firing a mouseout). Have separate function for over which shows the content, and out which hides it.

Better: just use the hover() method which is meant for exactly this purpose.

Aside from the correct answer by Cletus, i'd like to point out that using mouseenter and mouseleave events is not wrong. The trick only resides into the stop() method, in fact we could still do:

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

Here is a jsFiddle example :)

本文标签： javascriptHow to stop toggle event from being fired multiple times on mouseentermouseleaveStack Overflow