hoverIntent déclenche la fonction 'out' sur l'élément select

Question

Le code qui suit est utilisé pour afficher et masquer les listes déroulantes Mega. Si vous passez la souris sur un lien avec la classe de 'dropDown', c'est l'enfant '.dropPanel'. Tant que votre souris est sur le lien ou le panneau de suppression, le panneau de dépôt reste affiché. Déplacez le curseur n'importe où sauf le lien ou le panneau, et le panneau est caché. Des trucs assez basiques.

Dans certains de ces Mega Dropdowns, il existe des formulaires qui contiennent des éléments sélectionnés. Dans Firefox, tout va bien. Dans IE (8 en particulier, vous n'avez testé aucune autre version), si vous passez la souris sur un élément select dans le panneau déroulant, hoverIntent déclenche la fonction 'out' de dropPanelOff() et le cache drop panel.

Comment puis-je empêcher cela?

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

Essayez d'ajouter ceci à votre code:

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

Answer 2

peut-être vous devriez juste utiliser l'événement de vol stationnaire natif, vous pouvez ajouter un délai à elle aussi:

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