对dijit菜单项的onclick使用命名函数

using named function for onclick of dijit menu item

本文关键字：函数 onclick dijit 菜单项      更新时间：2023-09-26

我在为dijit菜单项调用onClick函数时遇到问题。我不断得到的功能是未定义的：

这是菜单项的代码：

...
<div data-dojo-type="dijit/DropDownMenu" id="fileMenu">
            <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){SetPage('test');}">Watershed</div>
        </div>

这是我要调用的函数：

function SetPage(pg){
alert(pg);
}

我必须在代码中注册onclick事件吗？

感谢

这是因为范围的问题，因为setpage不在菜单的onclick函数的范围内，你可以直接调用下面的警告函数：

<div data-dojo-type="dijit/DropDownMenu" id="fileMenu"> <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('test';}">Watershed</div> </div>

或者你可以在这里附加一个事件处理程序：

<div data-dojo-type="dijit/DropDownMenu" id="fileMenu"> <div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:_onClick">Watershed</div> </div>

以及在您的javascript文件中

_onClick:function(evt){this.SetPage(evt);}, SetPage:function(evt){ alert(evt.target.innerHTML);}

这听起来像是一个范围界定问题。即使命名了函数，它也应该在全局范围内可用，以便能够使用声明性代码。

例如，如果将该函数放在require()块中，它将不起作用，因为它的作用域仅限于该函数（仅从内部可见）。

例如：

require(["dijit/MenuItem", "dijit/DropDownMenu", "dojo/parser"], function() {
  function SetPage(pg) {
    alert(pg);
  };
  SetPage("test"); // This will work because it's in the same scope
});
SetPage("test"); // This will not work

下面的SetPage()调用有另一个作用域，所以它看不到函数。为了解决这个问题，必须在全局作用域（对于web应用程序为window）上定义函数。

一个可能的解决方案是：

require(["dijit/DropDownMenu", "dijit/MenuItem", "dojo/parser"], function() {
  window.SetPage = function(pg) {
    alert(pg);  
  }; 
});

这将起作用，因为您将其添加到window对象中。您可以在JSFiddle上看到一个这样的例子。

相关文章：