Question

我的代码段

<div id="mainMenu" data-dojo-type="dijit/MenuBar">
            <div id="edit" data-dojo-type="dijit/MenuBarItem">Add Hero</div>
            <div id="view" data-dojo-type="dijit/MenuBarItem">Grid View</div>
            <div id="task" data-dojo-type="dijit/MenuBarItem">Detailed View</div>
        </div>
    <script >
        var dojoConfig = {
            async: 1,
            parseOnLoad: 0
        };      
    </script>
    <script>
    require([
                   "dojo/dom",
                    "dojo",
                    "dojo/parser",
                    "dojo/query",
                    "dojo/on",
                    "dijit/Menu",
                    "dojo/domReady!"
                ], function(dom,dojo ,parser, query,on){

                    //var result = query("#edit");
                    var myButton=dojo.byId("edit");console.log(myButton);
                    on(myButton, "click", function(){
                        alert("Cliked on menu item");
                    });

                });
    </script>

我的目标是在点击时显示菜单名称。但问题是不会触发解析器事件。如果我将parseOnLoad更改为0或flase，那么我会收到提醒信息，但菜单会受到干扰，如果我将parseOnLoad设置为1，请点击事件不起作用？

Answer 1

虽然您的代码可能适用于DOM节点，但它不适用于小部件（dijits）。这也是禁用parseOnLoad功能时它起作用的原因，因为您从未将DOM节点解析为小部件。这意味着您的DOM事件将起作用，但当然，菜单永远不会创建为窗口小部件，因此您的菜单会出现问题。

现在，要解决此问题，您需要使用dijit/registry来检索菜单项：

var myButton = registry.byId("edit");

dojo/on模块仅适用于DOM事件，因此您也必须替换它。对我们来说幸运的是，widget对象（通过使用注册表检索的对象）已经有on()函数（参见API docs），我们可以这样使用：

myButton.on("click", function() {
    alert("Cliked on menu item");
});

我们需要改变的最后一件事是最初的DOM加载事件（dojo/domReady!）。在加载DOM之后解析小部件。这意味着如果我们收听DOM-ready事件，我们将无法检索窗口小部件。用于检查是否已加载DOM 和解析窗口小部件的事件处理程序是使用dojo/ready模块。它的语法与dojo/domReady!插件略有不同，因为我们这样使用它：

ready(function() { // Your code });

或者在你的情况下：

ready(function() { var myButton = registry.byId("edit"); console.log(myButton); myButton.on("click", function() { alert("Clicked on menu item"); }); });

完整示例也可以在JSFiddle找到。

由于解析器，Dojo事件无法正常工作

1 个答案: