奇怪的悬停事件问题

Question

关于悬停事件我有一个奇怪的问题。当我悬停到元素(.helpImg)时，它会在悬停函数中运行我的代码的4-6次。我不确定如何调试它。谁有主意？？非常感谢。

function test(){


console.log('testcall'); //this will only output 1 time

$('.helpImg').hover(function(){

         console.log('call'); //when hover the class, this will output multiple times (4~6 times randomly).          

         //the animation below will play multiple times too
          tooltip.css('display', 'block');
          tooltip.animate({ opacity: 0 }, 0);


          tooltip.animate({'opacity':'1','top':'-=10'},500);

        },function (){            
          $instance = $(this).css({'cursor': 'auto'});
          $('#tooltip-' + $instance.attr('id') ).hide(50);
          $(".js-tutorialTooltips").hide(50);
        })

}

Answer 1

您很可能多次注册hover事件，尝试以下快速修复方法：

$('.helpImg').not('.registered').addClass('registered').hover(function() { 
  //... your code

这将过滤出具有类registered的helpImg节点，将registered类添加到其他节点，并在其他节点上注册hover函数。

然而，更好的解决方案是找出为什么你的鼠标悬停事件会被多次注册。在您的代码中，您似乎有一个函数test，其中包括注册hover事件。如果您多次调用test，hover将被多次注册。

因此，处理这个问题的最好方法是在悬停事件处理程序之前执行console.log('register hover')，并使其只被调用一次。