dojo Dijit组合按钮/下拉菜单点击误解

nukf8bse  于 2022-12-16  发布在  Dojo
关注(0)|答案(1)|浏览(168)

我刚刚开始尝试Dojo,我只是想在Dijit ComboButton的DropDownMenu中的一个项目被单击时显示一个对话框,我尝试使用dojo.connect将onclick事件与一个函数关联起来,该函数只会显示一个包含项目中文本的对话框,但没有成功。
我已经设法让它以一种可怕的方式工作。现在所有的工作实际上都是手动写入onclick属性。我显然误解了一些东西。这是我目前拥有的:

JS:

require(["dijit/form/Button", "dijit/form/FilteringSelect", "dijit/DropDownMenu", "dijit/MenuItem"]);

    //if the following is defined inside dojo.ready, nothing happens
    function getmail(text)
    {
         alert('No mail from '+text);
    }

    dojo.ready(function(){ 
        //the following does nothing:
        dojo.connect(dojo.query(".dijitMenuItemLabel"), "onclick", function(evt) {
            console.log("mail item clicked");
            alert('Blah');
            //dojo.stopEvent(evt);
        });
    });

HTML:

<form method="POST">

    <div data-dojo-type="dijit.form.ComboButton" id="getmail">

        <span>Get All Mail</span>

        <div data-dojo-type="dijit.DropDownMenu">

            <div data-dojo-type="dijit.MenuItem" 
                data-dojo-props="onClick:function(){getmail(dojo.trim(dojo.query('.dijitMenuItemLabel', this.domNode)[0].innerHTML))}">
                Yahoo</div> 

            <div data-dojo-type="dijit.MenuItem">Google</div>

        </div>

    </div>

</form>

我看起来像是在误解Dojo吗?

(Or也许我犯了一些简单的JavaScript错误)
JSFiddle

1aaf6o9v

1aaf6o9v1#

你应该可以用这样的东西来做

var myButton = dijit.byId('getmail');
myButton.on('click', function(){ alert('clicked') });

我猜您在获取按钮时混淆了dojo.byId和dijit.byId-常规DOM节点在您连接小写的“onclick”时工作,但小部件触发驼峰大小写的“onClick”事件(区别是因为dijit与一些键盘事件一起触发,以便于访问)。
然而,对于较新版本的Dojo,最好不要使用dojo.connect,而使用我展示的更简单的“.on”API。
啊,在我忘记之前,看起来您可能忘记运行Dojo解析器(或将parseOnLoad设置为true),因此按钮从未创建。

相关问题