Question

我正在研究Ext.Button的扩展，它可以在mouseover / mouseout上显示/隐藏按钮的菜单。它对于按钮的直接子菜单非常有效，但是我遇到了一个问题，让它在任何二级/三级/菜单中都能正常运行。

现在，当用户在包含菜单的顶层菜单中移动am项目时，它将打开菜单，用户可以将光标移动到其中而没有任何问题，一切都将保持打开状态。如果用户然后将光标移出二级菜单进入开放空间，则所有菜单都将关闭，这也是正确的。但是，有时如果用户进入二级菜单，然后返回其父菜单，所有菜单都将关闭，这不应该发生，至少光标现在的父菜单应该保持打开状态

从我最初的调试开始，它看起来是事件发生的方式和时间问题。从子菜单移回父菜单时，似乎父菜单的mouseenter事件不会触发。其次它看起来像菜单鼠标悬停事件不能足够可靠地启动或经常足以在子菜单上的mouseleave事件触发后取消延迟隐藏任务。

问题演示：http://qs1724.pair.com/users/autod1nx/EMPLOYEE/BDAMI/hoverbutton/index.html

这就是代码，它有什么根本性的错误吗？

Ext.define('Ext.HoverButton', {    
    extend: 'Ext.Button',
    alias: 'widget.hoverButton',
    isOver: false,
    hideDelay: 250,
    showDelay: 200,

    applyListeners: function(menu, cfg) {
        Ext.apply(menu, cfg);
        Ext.each(menu.items, function(item, idx, allItems) {
            if(item.menu) this.applyListeners(item.menu, cfg);
        }, this);
    },

    initComponent: function() {
        var config = {}, 
            menuConfig = {}, 
            me = this;

        me.delayedShowMenu = new Ext.util.DelayedTask(function() {
            if(!me.isOver) return;
            me.showMenu();
        }, this);

        me.delayedHideMenu = new Ext.util.DelayedTask(function() {
            if(me.isOver) return;
            me.hideMenu();
        });

        if(Ext.isDefined(this.initialConfig.menu)) {
            config = {
                listeners: {
                    mouseover: {
                        scope: me,
                        fn: function(b) {
                            me.isOver = true;
                            me.delayedShowMenu.delay(me.showDelay);
                        }
                    },
                    mouseout: {
                        scope: me,
                        fn: function(b) {
                            me.isOver = false;
                            me.delayedHideMenu.delay(me.hideDelay);
                        }
                    }
                }
            };

            menuConfig = {
                listeners: {
                    mouseover: {
                        scope: me,
                        fn: function(menu, item, e) {
                            me.delayedHideMenu.cancel();
                        }
                    },
                    mouseenter: {
                        scope: me,
                        fn: function(menu, e) {
                            me.delayedHideMenu.cancel();
                        }
                    },
                    mouseleave: {
                        scope: me,
                        fn: function(menu, e) {
                            me.delayedHideMenu.delay(me.hideDelay);
                        }
                    }
                }
            };


            //apply mouseover/leave listeners to all submenus recursively
            me.applyListeners(me.menu, menuConfig);      
        }

        Ext.apply(me, Ext.apply(me.initialConfig, config));
        Ext.HoverButton.superclass.initComponent.apply(me, arguments);
    }
});

Answer 1

我发现这个有效，而且更简单。

Ext.define('Ext.HoverButton', {
extend    : 'Ext.Button',
alias     : 'widget.hoverButton',
listeners : {
        mouseover : function() {
            this.showMenu();
        },
        menushow : function() {
            this.mouseLeaveMonitor = this.menu.el.monitorMouseLeave(100, this.hideMenu, this);
        },
        destroy : function(combo) {
            combo.menu.el.un(combo.mouseLeaveMonitor);
        }
    }
});

Answer 2

我做了一些类似的事情，在看了http://www.quirksmode.org/dom/events/mouseover.html

之后我就解决了这个问题

似乎DOM的事件顺序应该是鼠标悬停 - ＆gt; mouseenter - ＆gt; mouseout - ＆gt; mouseleave这意味着有时会在设置delay（）之前调用cancel（）。为了解决这个问题，我把最后一个输入变量：

mouseenter: {
 scope: me,
 fn: function(menu, e) {
  presentlyInside = menu; /* << */
  me.delayedHideMenu.cancel();
 }
},
mouseleave: {
 scope: me,
 fn: function(menu, e) {
  if(presentlyInside==menu) /* << */
    me.delayedHideMenu.delay(me.hideDelay);
 }
}

希望它有所帮助！

ExtJS 4.1“HoverButton”扩展问题

2 个答案: