Est-il possible de forcer un pop-up de menu à se déclencher au clic au lieu de passer la souris?

Question

J'utilise un contrôle Menu ASP.NET avec Orientation = Horizontal. Il est un peu irritant que les menus contextuels apparaissent au passage de la souris, ce qui le fait apparaître par accident si vous déplacez la souris sur le menu lorsque vous voulez cliquer sur quelque chose juste en dessous du menu. Ensuite, le menu contextuel cache l'élément sur lequel vous vouliez cliquer!

Est-il possible de changer la fonctionnalité de sorte que le pop-up nécessite un clic de souris au lieu de passer la souris?

Answer 1

Eh bien, j'ai trouvé moi-même une solution (une sorte de piratage ...).
Cette solution nécessite l'utilisation d'AJAX pour capturer l'élément de menu onclick postback event, de sorte qu'il peut être récupéré côté client en javascript avant de faire la publication réelle lorsque vous cliquez sur l'élément de menu.

D'abord, je passer outre ces fonctions qui est défini par la commande du menu d'ignorer le popout du menu en cas mouseover:

var activeMenuItem = null; 

function Menu_HoverStatic(item) { 

    // Register the active item to be able to access it from AJAX 
    // initialize postback event 
    activeMenuItem = item 

    // Apply the style formatting on mouseover (colors etc). 
    // This was also called in the original Menu_HoverStatic function. 
    Menu_HoverRoot(item); 

} 

function Menu_Unhover(item) { 

    activeMenuItem = null; // This is the only difference to the original 

    var node = (item.tagName.toLowerCase() == "td") ? 
    item: 
    item.cells[0]; 
    var nodeTable = WebForm_GetElementByTagName(node, "table"); 
    if (nodeTable.hoverClass) { 
     WebForm_RemoveClassName(nodeTable, nodeTable.hoverClass); 
    } 
    node = nodeTable.rows[0].cells[0].childNodes[0]; 
    if (node.hoverHyperLinkClass) { 
     WebForm_RemoveClassName(node, node.hoverHyperLinkClass); 
    } 
    Menu_Collapse(node); 
} 


// Then I added a renamed copy of the original `Menu_HoverStatic` function: 
function Menu_ClickStatic() { 
    // Pick up the active menu item that is set in the 
    // overridden Menu_HoverStatic function. 
    // In the original, the item was input parameter. 
    var item = activeMenuItem; 

    // The rest is identical to the original Menu_HoverStatic. 
    var node = Menu_HoverRoot(item); 
    var data = Menu_GetData(item); 
    if (!data) return; 
    __disappearAfter = data.disappearAfter; 
    Menu_Expand(node, data.horizontalOffset, data.verticalOffset); 
} 

Je happer l'événement postback onclick en AJAX qui est déclenchée par la menu. Cela doit être fait pour annuler la publication onclick et afficher le menu popout à la place.

// Get the Page Request Manager that provides all the .NET 
var prm = Sys.WebForms.PageRequestManager.getInstance(); 
// Register postback event for asyncronous AJAX postbacks 
if (prm) prm.add_initializeRequest(InitializePostback); 
function InitializePostback(sender, args) { 
    var element = args.get_postBackElement(); 
    //Check if the postback element is the menu 
    if (element.id == 'myMenu') { 
    // Name of the menu element that triggered is the postback argument 
    var postbackArguments = document.getElementById('__EVENTARGUMENT'); 
    if (postbackArguments) 
     // Check on the menu item name to pick up only the menu items that shall 
     // trigger the popout (not the items that does an actual command). 
     if (postbackArguments.value == 'MenuTopItem1' 
     || postbackArguments.value == 'MenuTopItem2' 
     || postbackArguments.value == 'MenuTopItem3') { 
     // Abort and cancel the postback 
     prm.abortPostBack(); 
     args.set_cancel(true); 
     Menu_ClickStatic(); // Call my own copy of the original function 
     return; 
    } 
    } 
} 

Note:
J'ai découvert les détails sur ces fonctions en utilisant le lecteur de script dans Firebug.

Answer 2

La soluton fournie ci-dessus ne fonctionne pas dans le cas de tout le monde. On peut aussi essayer ceci, cela a fonctionné dans ma solution -

var jq = jQuery.noConflict(); 
      jq(document).ready(function() { 
       jq(document).on('click', '#ctl_id_Here', function() { 
        Menu_HoverStatic(this); 
        Menu_HoverRoot(this); 
       }); 
       jq(document).on('click', '#ctl_id_Here', function() { 
        Menu_HoverStatic(this); 
        Menu_HoverRoot(this); 
       }); 
      });