Onmouseover在元素上悬停时多次运行？

Question

Why does onmouseover run multiple times while I hover over one element?

I'm trying to run a simple animation when the user hovers over an icon but it runs multiple times.

I'm testing it here:

http://lujanventas.com/test.php

Anyway, any ideas on how to fix it? maybe using a listener instead?

This is the javascript running onmouseover:

function upIcon(n) {
    console.log("Mouseover icon: " + n);
    $('#icon' + n).animate({ backgroundPositionY : "-=15px" }, 200 );
    $('#icon' + n).animate({ backgroundPositionY : "+=15px" }, 200 );
    }

Answer 1

Try using mouseenter and mouseleave instead of mouseover and mouseout . The former fires only when the cursor enters the region of the element and the latter fires when the cursor moves between descendants as well.

I added this code to your page via my console and it worked as expected:

//bind an event handler to each nav element for the mouseenter event
$('.categoryButtons').children().bind('mouseenter', function () {

    //call the `upIcon` function with the index of the current element
    upIcon(($(this).index() + 1));
});

I also removed the inline onmouseover code for each nav item.

Update

You can use your existing function a bit differently and not use the anonymous function for your event handler (notice the function chaining to avoid duplicate selections):

function upIcon(event) {
    var n = ($(this).index() + 1);
    $('#icon' + n).animate({ backgroundPositionY : "-=15px" }, 200 ).animate({ backgroundPositionY : "+=15px" }, 200 );
}

$('.categoryButtons').children().bind('mouseenter', upIcon);

When you reference an existing function as the event handler, it gets passed the event object like any other event handler and you can also use this to refer to the element on which the event was triggered.

Answer 2

A couple of things:

• To solve your problem I would use the mouseenter event instead - this means when the mouse enters the element the code is executed, and then you can use mouseleave to change the animation again when the mouse pointer leaves.

• Rather than using messy onmouseover events, you would be better using jQuery for what it is meant for - unobtrusive codes. Bind events to the elements eg

   $(document).ready(function() { $(".icon").mouseenter(function() { $(this).animate({ backgroundPositionY : "-=15px" }, 200 ); }); $(".icon").mouseleave(function() { $(this).animate({ backgroundPositionY : "+=15px" }, 200 ); }); }); 

Answer 3

Since you're using jQuery, you could use mouseenter instead of mouseover --it's designed to protect you from mouseout events when there are multiple items within your target.

More: http://api.jquery.com/mouseenter/

So, you'd want to remove the events attached to each item (which isn't great form in the first place, and instead do the following in a script block:

$('.categoryButtons').find('a').mouseenter(function(){
    /* ... Do something, probably depending on $(this).attr('id') or $(this).attr('rel') ... */
});

Answer 4

Rather than using onmouseover, I'd recommend using JQuery's mouseenter to avoid the multiple firing of the handler due to event bubbling:

http://api.jquery.com/mouseenter/