Question

我正在使用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的“label”元素和点击按钮的向下箭头，但我不确定这是否可行。即，当单击标签时，我捕获onClick，但不会导致显示下拉列表。但是，如果单击向下箭头或单击按钮上的任何其他位置，将显示下拉列表。

另一种方法是将其拆分为标准按钮，然后在其旁边放置一个下拉按钮，但我想知道是否有任何方法可以通过单个标准DropDownButton执行此操作？

Answer 1

检查点击元素中的downarrow或buttontext类。要正确挂钩事件的“流程”，您应该覆盖类函数 _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');

Dojo DropDownButton，我可以区分点击按钮和向下箭头吗？

1 个答案: