.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(); 
     } 
    }); 
});