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

您最有可能多次注册悬停事件，请尝试使用此方法进行快速修复：

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

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

然而，更好的解决方案是找出您的悬停事件多次注册的原因。在您的代码中，您似乎有一个函数test，其中包括注册悬停事件。如果您多次致电test，则悬停将多次注册。

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

奇怪的悬停事件问题

1 个答案: