javascript 鼠标悬停在元素上时多次运行？

Onmouseover running multiple times while hovering on element?

提问by lisovaccaro

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

为什么当我将鼠标悬停在一个元素上时 onmouseover 会运行多次？

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

http://lujanventas.com/test.php

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

无论如何，关于如何解决它的任何想法？也许使用监听器代替？

This is the javascript running onmouseover:

这是在鼠标悬停上运行的 javascript：

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

回答by Jasper

Try using mouseenterand mouseleaveinstead of mouseoverand 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.

尝试使用mouseenterandmouseleave代替mouseoverand mouseout。前者仅在光标进入元素区域时触发，后者在光标在后代之间移动时触发。

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 onmouseovercode for each nav item.

我还删除了onmouseover每个导航项的内联代码。

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 eventobject like any other event handler and you can also use thisto refer to the element on which the event was triggered.

当您引用现有函数作为事件处理程序时，它会event像任何其他事件处理程序一样传递对象，您还可以使用this来引用触发事件的元素。

回答by christophmccann

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 e.g.

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

• 为了解决您的问题，我将改用 mouseenter 事件 - 这意味着当鼠标进入元素时，代码将被执行，然后您可以在鼠标指针离开时使用 mouseleave 再次更改动画。

• 与其使用乱七八糟的 onmouseover 事件，不如使用 jQuery 来实现它的目的 - 不显眼的代码。将事件绑定到元素，例如

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

回答by Matt Stauffer

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

由于您使用的是 jQuery，因此您可以使用mouseenter而不是mouseover--it 来保护您在目标中有多个项目时免受鼠标退出事件的影响。

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

更多：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') ... */
});

回答by kinakuta

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

我建议使用 JQuery 的 mouseenter 来避免由于事件冒泡而多次触发处理程序，而不是使用 onmouseover：

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

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