HoverIntent löst 'out' -Funktion bei ausgewähltem Element aus

Question

Der folgende Code wird zum Anzeigen und Verbergen von Mega-Dropdowns verwendet. Wenn Sie die Maus über eine Verknüpfung mit der Klasse von 'dropDown' bewegen, wird die untergeordnete '.dropPanel' angezeigt. Solange sich die Maus über dem Link oder dem Drop-Panel befindet, bleibt das Drop-Panel angezeigt. Bewegen Sie den Cursor an eine beliebige Stelle außer den Link oder das Panel, und das Panel ist ausgeblendet. Ziemlich grundlegende Sachen.

In einigen dieser Mega-Dropdown-Menüs gibt es Formulare, die ausgewählte Elemente enthalten. In Firefox ist alles in Ordnung. Im IE (8 haben keine anderen Versionen getestet), wenn Sie mit der Maus über ein ausgewähltes Element im Drop-Panel gehen, löst HoverIntent die 'out'-Funktion von dropPanelOff() aus und das Drop-Panel wird ausgeblendet.

Wie verhindere ich das?

 // Apply Hover Intent to Menu Panels 
     $(".dropDown").hoverIntent({ 
      sensitivity: 10, 
      interval: 150, 
      over: dropPanelOn, 
      timeout: 150, 
      out: dropPanelOff 
     }); 

      // Menu Over function call 
      function dropPanelOn() { 
       $('a[rel="dropLink"]', this).addClass('hover'); 
       $('.dropPanel', this).slideDown('fast'); 
      } 

      // Menu Out function call 
      function dropPanelOff() { 
       obj = this; 
       $('.dropPanel', this).slideUp(100, function(){ 
        $('a[rel="dropLink"]', obj).removeClass('hover'); 
        $('.dropLink span', obj).removeClass('hover'); 
       }); 
      } 

Answer 1

Versuchen, diese zu Ihrem Code:

$(".dropDown select").mouseout(function(e) { 
     e.stopPropagation(); 
}); 

Answer 2

vielleicht sollten Sie nur die native Hover-Ereignis verwenden, können Sie eine Zeitverzögerung es auch hinzufügen:

var time = false; 
$(".dropDown").hover(function() { 
    if ($("dropPanel", this).is(":hidden")) $("dropPanel", this).slideDown('fast'); 
    else window.clearTimeout(timer); 
}, function() { 
    var obj = $(this); 
    timer = window.setTimeout(function() {obj.slideUp(100);}, 150); 
});