.mouseover麻煩：重複功能

Question

好吧，我有這個菜單，我用jQuery.mouseover函數和一些ul/li類做懸停效果。它很好，直到我在菜單中快速移動鼠標。 它一遍又一遍地執行該功能。

這是我的jQuery。

<script type="text/javascript"> 
$(document).ready(function(){ // Script del Navegador 
$("ul.subnavegador").not('.selected').hide(); 
$("a.desplegable").mouseenter(function(e){  
var desplegable = $(this).parent().find("ul.subnavegador"); 
    $('.desplegable').parent().find("ul.subnavegador").not(desplegable).slideUp('normal'); 
    desplegable.slideToggle('normal'); 
    e.preventDefault(); 
}) 
}); 
</script> 

而且現在的菜單

<ul class="navegador"> 
<li><a href="default.htm">Inicio</a></li> 
<li><a href="default.htm">Inicio</a></li> 
<li><a href="presentacion.htm">Presentacion</a></li> 
      <li><a href="erpintro.htm" class="desplegable">ERP,CRM</a> 
       <ul class="subnavegador"> 
<li><a href="ERP.htm">· ERP</a></li> 
        <li><a href="CRM.htm">· CRM</a></li> 
       </ul> 
      </li> 
      <li><a href="hostintro.htm" class="desplegable">Hosteleria</a> 
       <ul class="subnavegador"> 
        <li><a href="hostrest.htm">· ERP Restaurantes</a></li> 
        <li><a href="hostele.htm">· ERP Telecomandas</a></li> 
        <li><a href="hosthot.htm">· ERP Hotel</a></li> 
        <li><a href="hostbar.htm">· Alfa Bar TPV</a></li> 
       </ul> 
      </li>  
      <li><a href="comintro.htm" class="desplegable">Comercio</a> 
       <ul class="subnavegador"> 
        <li><a href="comezapa.htm">· Zapaterias</a></li> 
        <li><a href="comeropa.htm">· Tiendas de ropa</a></li> 
        <li><a href="comedepo.htm">· Deporte</a></li> 
        <li><a href="comejoy.htm">· Joyerias</a></li> 
        <li><a href="comeperfu.htm">· Perfumerias</a></li> 
        <li><a href="comerega.htm">· Tiendas de regalo</a></li> 
        <li><a href="comepelu.htm">· Peluquerias</a></li> 
        <li><a href="cometpv.htm">· TPV Comercio</a></li> 
        <li><a href="cometpvtactil.htm">· TPV tactil comercio</a></li> 
       </ul> 
      </li> 
      <li><a href="hidrointro.htm" class="desplegable">Hidrocarburos</a> 
       <ul class="subnavegador"> 
        <li><a href="hidroeess.htm">· Estaciones de Servicio</a></li> 
        <li><a href="hidroauto.htm">· Terminal de Autoservicio</a></li> 
        <li><a href="hidrogaso.htm">· Gasocentros</a></li> 
        <li><a href="hidroenruta.htm">· Venta en ruta de Gasoleos</a></li> 
       </ul> 
      </li> 
      <li><a href="bodintro.htm" class="desplegable">Bodegas y Almazaras</a> 
       <ul class="subnavegador"> 
        <li><a href="Bodegas.htm">· Bodegas</a></li> 
        <li><a href="Almazaras.htm">· Almazaras</a></li> 
       </ul> 
       </li> 
      <li><a href="servicios.htm">Servicios Informatcios</a></li> 
      <li><a href="default.htm">Telefonía</a></li> 
      <li><a href="default.htm">Diseño Web</a></li> 
      <li><a href="default.htm">Formación</a></li> 
      <li><a href="Eventos.htm">Eventos</a></li> 
      <li><a href="ubicacion.htm">Ubicación</a></li> 
      <li><a href="promotions/equipamiento.htm">Promociones</a></li> 
     </ul> 

預先感謝任何答覆和幫助

Answer 1

您可以在slideToggle()之前試用.stop()功能。

desplegable.stop(true, false).slideToggle('normal'); 

API：http://api.jquery.com/stop/

當事情變得更加複雜（回調，......），它可能是不錯的包裹的事件處理程序內的一切。

// ignore fast events, good for capturing double click 
// @doc (event.timeStamp): http://api.jquery.com/event.timeStamp/ 
// @bug (ev.currentTime): https://bugzilla.mozilla.org/show_bug.cgi?id=238041 
ignoredEvent: (function() { 
    var last = {}, 
     diff, defEvent; 

    return function (callback, time, id) { 
     defEvent = this.defaults.events.ignore; // object: { id: "event", ms: 300 } 
     id = id || defEvent.id; 
     diff = last[id] ? time - last[id] : time; 

     if (diff > defEvent.ms) { 
      last[id] = time; 
      callback(); 
     } 
    }; 
})(); 

只要確保當前時間可以達到x瀏覽器。 (new Date).getTime()可以幫助，而不是event.currentTime或event.timeStamp。

我實現的例子是這樣的東西：

container.navigation.click(function (ev) { 
    ev.preventDefault(); 
    helpers.ignoredEvent(function() { 
     // do your thing here 
    }, (new Date).getTime()); 
}); 

Answer 2

一個簡單的方法是保持在mouseenter被觸發時被觸發一個boolean當eventhandler完成發射。

var entered = false; 
$(document).ready(function(){ // Script del Navegador 
    $("ul.subnavegador").not('.selected').hide(); 
    $("a.desplegable").mouseenter(function(e){  
     if(!entered){ 
      entered = true; 
      var desplegable = $(this).parent().find("ul.subnavegador"); 
      $('.desplegable').parent().find("ul.subnavegador").not(desplegable).slideUp('normal'); 
      desplegable.slideToggle('normal', function(){ 
       entered = false; 
      }); 
      e.preventDefault(); 
     } 
    }); 
});