Javascript mootools 延迟隐藏/显示多级菜单

Question

我用 css 和 javascript 制作了一个 javascript 菜单。我使用过一些mootools(1.11，我唯一可以使用的版本)。

该脚本在 domready 上运行，它获取 dom 元素，并在 mouseenter 和 mouseleave 事件上添加函数(showmenu、hidemenu)。 dom 元素是三层嵌套的 ul/li。

现在我想在第一次将鼠标悬停在菜单上时在菜单上添加 500 毫秒的延迟，并在用户离开菜单时再次添加延迟(以便用户有半秒的时间返回到菜单)菜单)。

我不知道如何跟踪事件并取消它们。我对 javascript 的了解还不够好，不知道从哪里开始。谁能给我一个例子，我应该如何创建这个？并不是真正在寻找剪切和粘贴代码，更多有关 javascript 工作的指针，我可以使用哪些 native 函数，以及设置此类内容的最佳方法是什么。

提前致谢

附:也许我还想在用户已经使用菜单来显示项目时有一个延迟(100 毫秒左右)。这会更复杂吗？

Answer 1

也许这可以给你一个想法:http://www.jsfiddle.net/dimitar/stthk/ (从我正在开发的另一个菜单类中提取它并为您进行了延迟修改作为示例)

基本上有几个有趣的地方:

options: {
    showDelay: 500,
    hideDelay: 500
},

定义鼠标悬停和移出时的延迟。

然后通过 .delay() 延迟 mouseenter 的绑定(bind):

mouseenter: function() {
    $clear(_this.timer);
    _this.timer = (function() {
        this.retrieve("fold").setStyle("display", "block");
    }).delay(_this.options.showDelay, this);
},
mouseleave: function() {
    $clear(_this.timer);
    _this.timer = (function() {
        this.retrieve("fold").setStyle("display", "none");
    }).delay(_this.options.hideDelay, this);
}

_this.timer 是一个处理延迟函数的共享变量 - 它会在鼠标移出或鼠标悬停时被清除。如果在指定的时间内没有发生重要的事件，它将相应地改变显示，否则，它将取消该功能。

这适用于 mootools 1.2.5 顺便说一句(存储系统 + 元素委托(delegate))，但对于重要的位来说，原则保持不变。