使用 MouseOver 事件控制 dijit.MenuBar答案

【问题标题】：Controlling dijit.MenuBar with MouseOver events使用 MouseOver 事件控制 dijit.MenuBar
【发布时间】：2011-12-12 15:22:05
【问题描述】：

在 Dojo 中，是否可以配置 dijit.MenuBar 以使菜单由 MouseOver 和 MouseOut 事件触发？实际上这种行为已经可用，但是它是通过初始或连续的鼠标单击事件打开或关闭的 - 所以最初，MouseOver 不会导致菜单弹出，但是如果用户点击菜单项，菜单栏就会响应 MouseOver 事件.连续单击鼠标将再次关闭此行为。

我想要的是基于 MouseOver 事件弹出的菜单和子菜单，而不受点击事件的干扰。请查看http://dojotoolkit.org/reference-guide/dijit/MenuBar.html 的示例以了解我的意思。

【问题讨论】：

我只是想分享一下，Dojo 1.9.0 现在在 dijit.MenuBar 中有一个名为 passivePopupDelay 的属性。如果将其设置为 300 毫秒，它将在 300 毫秒后在鼠标悬停时显示菜单。默认值为无穷大。

标签： javascript widget dojo

【解决方案1】：

你的问题激起了我的兴趣，我发了working solution。

我检查了 dijit/Menu.js 中的 dijit._MenuBase 源代码，显然在继续之前检查了 this.isActive 标志。所以我创建了一个子类，只是预先将此标志设置为真：

_ActivateOnMouseoverMixin = dojo.declare(null, {
    onItemHover: function(item){
        if(!this.isActive){
            this._markActive();
        }
        this.inherited(arguments);
    }
});

ActiveMenuBar = dojo.declare([dijit.MenuBar, _ActivateOnMouseoverMixin], {});

作为奖励，您还可以使用 popupDelay 变量修改延迟（我在示例中将其更改为更快）

我不知道是否有另一种更理智的方法来做同样的事情。

【讨论】：

谢谢 - 成功了。我可能会和YUI一起去。对我来说，这是在 dojo 和 YUI 之间的选择，我发现 YUI 小部件的制作和记录更好——至少对于基本的小部件使用而言。
漂亮的答案，但考虑 unhover 事件，如何使悬停/打开弹出窗口消失？

【解决方案2】：

这是一个将“Hugomg”的解决方案扩展到取消悬停菜单和子菜单的示例：
[在此处输入链接描述][1]

[1]: http://jsfiddle.net/vg10c9md/2/

【讨论】：