0

我正在使用 Dojo 在工具栏中创建一个 DropDownButton。工具栏和按钮是动态创建的，如下所示：

this.widget = new Toolbar({ style: "background:black;" }, "toolbar");
this.dropMenu = new DropDownMenu({tooltip : "ToolTip", style: "display: none;"});
this.button = new DropDownButton({dropDown: this.dropMenu});
this.button.set('label', '<img src="data:image/png;base64,'+ this.icon + '"/>');
this.widget.addChild(this.button);

请注意，上面的代码通过为按钮的 label 属性设置 img src 从 base64 编码的字符串动态创建一个图标作为按钮的一部分。

我想区分单击 DropDownButton 的“标签”元素和单击按钮的向下箭头，但不确定这是否可行。即，当单击标签时，我捕获了 onClick，但不会导致显示下拉菜单。但是，如果单击向下箭头或单击按钮上的任何其他位置，则会显示下拉菜单。

一种替代方法是将其拆分为标准按钮，然后将其拆分为与其相邻的下拉按钮，但我想知道是否有任何方法可以从单个标准 DropDownButton 执行此操作？

4

1 回答 1

3

检查它是否是单击元素中的向下箭头或按钮文本类。要正确挂钩事件的“流程”，您应该覆盖类函数_onDropDownMouseDown

var customDropDownButton = declare("customDropDownButton", [ DropDownButton ], {

    toggleDropDown: function() {
        console.log('toggling'); 
        this.inherited(arguments); 
    },
    _onDropDownMouseDown: function(evt) {
        console.log(arguments, evt.srcElement.className);

        if (/dijitButtonText/.test(evt.srcElement.className)) {
            // negate popup functionality 
            console.log('negating');
            return false;
        }
        this.inherited(arguments);
        return true;
    }

});
var b = new customDropDownButton({
    label: "hello!",
    name: "programmatic1",
    dropDown: someMenu
});

或者，如果您可以忍受弹出窗口显示然后立即再次关闭 - 简单的方法是：

var b = new DropDownButton({
    label: 'hello!',
    name: "programmatic2",
    dropDown: someMenu,

    onClick: function(evt) {
        if(/dijitButtonText/.test(evt.srcElement.className)) {
             // negate popup
             popup.close(this.dropDown);
        }
    }
}, 'button');
于 2012-09-25T21:03:57.967 回答