Можно ли заставить всплывающее меню вызывать щелчок вместо наведения мыши?

Question

Я использую элемент управления ASP.NET Menu с ориентацией = горизонтальной. Вызывает раздражение, что всплывающие меню появляются при наведении мыши, что приводит к их случайному отображению, если вы наводите курсор мыши на меню, когда хотите щелкнуть что-то прямо под меню. Затем всплывающее меню скрывает элемент, на который вы на самом деле хотели щелкнуть!

Можно ли изменить функциональность, чтобы всплывающее окно требовало щелчка мышью вместо наведения мыши?

Answer 1

Что ж, я сам нашел решение (что-то вроде хака ...).
Это решение требует использования AJAX для захвата события постблока элемента меню по щелчку, поэтому его можно получить на стороне клиента в javascript перед выполнениемфактическая обратная передача при нажатии на элемент меню.

Сначала я переопределяю эти функции, определенные элементом управления Menu, чтобы игнорировать всплывающее меню в событии наведения мыши:

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

Затем яПодберите событие постблока onclick в AJAX, которое вызывается меню.Это необходимо сделать, чтобы отменить постбэк при нажатии и вместо этого отобразить всплывающее меню.

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

Примечание:
Я узнал подробности об этих функцияхс помощью средства просмотра сценариев в Firebug.

Answer 2

Солутон, представленный выше, не работает в любом случае. Можно также попробовать это, это сработало в моем решении -

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