可以't在自定义dojo小部件内分配onclick事件

can't assign onclick event inside a custom dojo widget

本文关键字：小部 分配 事件 onclick dojo 自定义 可以      更新时间：2023-09-26

我有一个自定义小部件，定义如下：

dojo.declare('myWidget', [dijit._WidgetBase, dijit._Templated],
{
    'templateString':'<span>' +
            '<a  dojoAttachPoint="linkNode" href="blah.php">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',
    'stuff':null,
    'startup':function()
    {
        dojo.connect(this.linkNode, 'onclick', function(e){dojo.stopEvent(e);alert('hi');});
    }
});

正如您所看到的，我正试图在自定义小部件的一部分上分配一个onclick事件。我正在以编程方式创建小部件，并将其推到类似于以下的页面上：

...
    f = new myWidget(stuff);
    f.startup();    
    li = dojo.create('li', {'class':'thingy'});
    dojo.place(f.domNode, li);
    dojo.place(li, this.gallery); // within another widget,
...

不幸的是，在启动方法中连接的onclick事件没有启动。我试着用各种方式分配它，但似乎都不起作用。

我做错什么了吗？

我不能确定为什么您的案例不起作用，可能是因为您没有通过在方法末尾添加this.inherited(arguments);来将方法调用传播到启动。

然而，在你的情况下，我认为另一种方法可能更合适。除了您显然知道的dojoAttachPoint的功能之外，dojo还有dojoAttachEvent。我建议你这样做：

dojo.declare('myWidget', [dijit._WidgetBase, dijit._Templated],
{
    'templateString':
        '<span>' +
            '<a dojoAttachEvent="onClick:_linkNodeClick" href="blah.php">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',
    'stuff':null,
    '_linkNodeClick':function(e){
        dojo.stopEvent(e);
        alert('hi');
    }
});

编辑

好吧，我现在自己试过了，并设法让它像这样工作：

dojo.provide("MyWidget");
dojo.declare('MyWidget', [dijit._Widget, dijit._Templated],
{
    'templateString':
        '<span>' +
            '<a dojoAttachPoint="linkNode">' +
                '<img class="thumbNail" src="blahthumb.php" />' +
            '</a>' +
            '<h4 dojoAttachPoint="title" class="title">${blahtitle}</h4>' +
        '</span>',
    'startup':function()
    {
        dojo.connect(this.linkNode, 'onclick', function(e){dojo.stopEvent(e);alert('hi');});
    }
});

为了启动它，我必须在调用启动之前将它附加到DOM。

var f = new MyWidget();
dojo.body().appendChild(f.domNode);
f.startup();

我从你原来的版本中修改的唯一一件事就是添加dojo.profile（…），我不知道这是否真的很重要。然后我使用了_Widget而不是_WidgetBase。然后也像我提到的那样改变顺序。现在，当我点击图片时，它会提醒"嗨"，然后链接就不会被关注了。

我终于想通了。这与我如何构建小部件无关，而是我正在运行的一个函数，它会在小部件运行后立即修改它。不确定它为什么导致onclick事件消失，但它正在修改一些小部件的dom节点的innerHTML属性。当我评论这一部分时，一切都很顺利。

相关文章：