jquery：防止大規模懸停事件，直到鼠標元素爲0.5秒

我有一個使用懸停事件來顯示動態區域的菜單項列表。問題在於，當用戶在各個菜單項上移動時，每個菜單項都會觸發toggle（）事件，導致大量的顯示/隱藏事件在您到達所需的實際菜單元素之前被觸發。jquery：防止大規模懸停事件，直到鼠標元素爲0.5秒

jQuery(".categoryPopupLink").hover(
      function() { 
        var str = jQuery(this).attr('id'); 
        var id = str.substring(str.indexOf("_") + 1); 

        jQuery (".categoryPopup:visible").toggle (750); 

        jQuery ("#categoryPopup_" + id).toggle (750); 
        return false; 
      } 
    );

如何可以修改此代碼，以便如果鼠標保持在菜單元件一段特定的持續時間（例如，0.5秒）的肘節（）事件僅燒製。

來源

2013-10-15 user13955

你可以使用像[hoverIntent]這樣的插件（http://cherne.net/brian/resources/jquery.hoverIntent.html） – jbabey

你能告訴我們'mouseover'或'mouseenter'事件處理程序，還是那個在上面，但是有錯誤的事件？ – Archer

對不起，粘貼舊版本的代碼，我現在糾正它。 – user13955

嘗試......

var timeoutID = 0; 

jQuery(".categoryPopupLink") 
    .on("mouseenter", function() { 
     var str = this.id; 
     var id = str.substring(str.indexOf("_") + 1); 
     clearTimeout(timeoutID); 
     setTimeout(function() { 
      jQuery(".categoryPopup:visible").hide(); 
      jQuery("#categoryPopup_" + id).show(); 
     }, 500); 
    }) 
    .on("mouseleave", function() { 
     clearTimeout(timeoutID); 
     jQuery(".categoryPopup:visible").hide(); 
    });

應該顯示元素之前離開500ms的停頓。

來源

2013-10-15 13:29:05 Archer

我試過了。這確實實現了一個超時，但仍然觸發所有的鼠標懸停evnets。只需要最後一個（用戶暫停鼠標）觸發。這可以用你的技術來實現嗎？ – user13955

你將不得不在你的問題中發佈一些html。如果腳本中有東西不正確地引用DOM，那麼我不禁要看到它:) – Archer

jquery：防止大規模懸停事件，直到鼠標元素爲0.5秒

回答

相關問題