jQuery Hover Menu disparaît lorsque vous cliquez avec le bouton droit

Question

J'ai un menu qui s'ouvre lorsque vous passez la souris. Mais à droite, cliquez sur le menu disparaît lorsque le menu contextuel s'ouvre. Mais je ne peux pas comprendre pourquoi. J'ai besoin du menu hover ouvert en même temps avec contextmenu/clic droit.

Le code jQuery (Version jquery-1.11.2.min.js):

jQuery(document).on('mouseover','#main_menu',function() { 

     jQuery('#main_menu_inner').show(); 

    }); 
    jQuery(document).on('mouseleave','#main_menu',function() { 

     jQuery('#main_menu_inner').hide(); 

    }); 

Le code HTML:

<div id="main_menu"> 
    <img id="menu_button" src="/skin/images/all/structure/menu_button.png" alt="Men&uuml;" /> 
    <div id="main_menu_inner"> 
     <img id="menu_arrow" src="/skin/images/all/structure/main_menu_arrow_down.png" alt="Arrow" /> 
     <div class="clear_right"></div> 
     <ul> 
      <li> 
       <a href="">Link</a> 
      </li> 
      <li> 
       <a href="">Link</a> 
      </li> 
      <li> 
       <a href="">Link</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

Vous pouvez "pirater" le comportement mouseover/mouseleave en ajoutant un boolean pour vérifier si le menu contextuel est ouvert dans le gestionnaire d'événements mouseleave. Ce n'est pas une très bonne pratique, mais il fait votre demande possible:

var contextMenuOpened = false; 

$(document).on('mouseover', '#main_menu', function() { 
    $('#main_menu_inner').show(); 
    contextMenuOpened = false; 
}); 

$(document).on('mouseleave', '#main_menu', function() { 
    $("#main_menu").on('contextmenu', function (e) { 
     contextMenuOpened = true; 
    }); 
    if (!contextMenuOpened) { 
     $('#main_menu_inner').hide(); 
    } 
}); 

Live exemple