是否可以强制菜单弹出窗口在单击时触发，而不是将鼠标悬停在弹出菜单上? [英] Is it possible to force a menu popout to trigger on click instead of mouseover?

问题描述

我使用Orientation = Horizo​​ntal的ASP.NET菜单控件.鼠标悬停在弹出菜单上时会令人感到恼火，如果您想在菜单下方单击某些内容，将鼠标移到菜单上，则会导致弹出菜单意外显示.然后，菜单弹出窗口会隐藏您实际要单击的元素！

I use a ASP.NET Menu control with Orientation=Horizontal. It is kind of irritating that the popout menus appear on mouseover, which causes it to show by accident if you move the mouse over the menu when you want to click on something right below the menu. Then the menu popout hides the element you actually wanted to click on!

是否可以更改功能，以便弹出窗口需要单击鼠标而不是鼠标悬停?

Is it possible to change the functionality so that the popout requires a mouse click instead of mouseover?

推荐答案

好吧，我自己找到了一个解决方案(有点黑...).
此解决方案需要使用AJAX来捕获菜单项onclick回发事件，因此在单击菜单项进行实际回发之前，可​​以在javascript中从客户端上拾取它.

Well, I found a solution myself (kind of a hack...).
This solution requires use of AJAX to capture the menu item onclick postback event, so it can be picked up client side in javascript before doing the actual postback when you click the menu item.

首先，我重写由Menu控件定义的这些功能忽略鼠标悬停事件中的菜单弹出窗口:

First, I override these functions that is defined by the Menu control to ignore the menu popout in the mouseover event:

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

然后，我将捕捉由菜单触发的AJAX中的onclick回发事件.必须这样做才能取消onclick回发并显示菜单弹出窗口.

Then I snap up the onclick postback event in AJAX that is triggered by the menu. This must be done to cancel the onclick postback and display the menu popout instead.

// 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中的脚本查看器发现了有关这些功能的详细信息.

Note:
I found out the details about these functions by using the script viewer in Firebug.

这篇关于是否可以强制菜单弹出窗口在单击时触发，而不是将鼠标悬停在弹出菜单上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！