如何为Dojo中的PopupMenuBarItem添加onClick事件？

问题原因 #

PopupMenuBarItem的默认行为是点击时打开下拉菜单，直接在构造函数里传入onClick会被组件的默认事件逻辑覆盖，导致自定义事件无法触发。

解决方案 #

有两种可行的处理方式：

方式一：使用on方法绑定点击事件

创建PopupMenuBarItem实例后，通过Dojo的事件绑定方法on绑定点击事件，避开默认逻辑的覆盖：

require([
    "dijit/MenuBar",
    "dijit/PopupMenuBarItem",
    "dijit/DropDownMenu",
    "dojo/on",
    "dojo/domReady!"
], function(MenuBar, PopupMenuBarItem, DropDownMenu, on){
    var pMenuBar = new MenuBar({});

    var pSubMenu = new DropDownMenu({});
    var menuItem1 = new PopupMenuBarItem({
        label: "ItemMenu1",
        popup: pSubMenu
    });
    // 绑定点击事件
    on(menuItem1, "click", function(e){
        alert('ItemMenu1');
        // 若需要保留打开下拉菜单的默认行为，添加下面这行
        this.openPopup();
    });
    pMenuBar.addChild(menuItem1);

    var pSubMenu2 = new DropDownMenu({});
    pMenuBar.addChild(new PopupMenuBarItem({
        label: "ItemMenu2",
        popup: pSubMenu2,
    }));

    pMenuBar.placeAt("navigation");
    pMenuBar.startup();
});

方式二：重写onClick方法并手动触发默认行为

在构造PopupMenuBarItem时重写onClick方法，同时手动调用打开下拉菜单的逻辑，确保自定义事件和默认行为都生效：

require([
    "dijit/MenuBar",
    "dijit/PopupMenuBarItem",
    "dijit/DropDownMenu",
    "dojo/domReady!"
], function(MenuBar, PopupMenuBarItem, DropDownMenu){
    var pMenuBar = new MenuBar({});

    var pSubMenu = new DropDownMenu({});
    pMenuBar.addChild(new PopupMenuBarItem({
        label: "ItemMenu1",
        popup: pSubMenu,
        onClick: function(e){
            alert('ItemMenu1');
            // 调用默认的打开下拉菜单逻辑
            this.openPopup();
        }
    }));

    var pSubMenu2 = new DropDownMenu({});
    pMenuBar.addChild(new PopupMenuBarItem({
        label: "ItemMenu2",
        popup: pSubMenu2,
    }));

    pMenuBar.placeAt("navigation");
    pMenuBar.startup();
});

注意事项 #

• 如果不需要打开下拉菜单，只执行自定义事件，去掉this.openPopup()即可。
• 确保引入了对应的模块（比如方式一需要引入dojo/on）。

内容的提问来源于stack exchange，提问作者Alexander Ermolenko