.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/

当事情变得更加复杂（回调，...）时，将所有内容都包装在 eventHandler 中可能会很好。

// 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-browser 可以实现当前时间。 (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

一个简单的方法是维护一个boolean，它在mouseenter 被触发和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();
        }
     });
});