Question

我在自定义小部件中实例化一个dijit按钮。这一切都很好。在小部件代码中，我绑定了一个onclick事件处理程序，但是当我单击该按钮时，事件会触发两次。另外一个问题是它还将click事件绑定到页面中与窗口小部件无关的其他按钮。以下是我所拥有的简化版本。任何人都可以告诉我为什么这样做。我花了最后几个小时试图解决它。

代码如下，但你也可以在这里看到

这是实例化自定义窗口小部件的html页面 https://github.com/screenm0nkey/dojo/blob/master/widgets/destroy-widget.html

这是自定义小部件 https://github.com/screenm0nkey/dojo/blob/master/js/tag/widgets/DestroyWidget/Widget.js

这是包含嵌套小部件的模板 https://github.com/screenm0nkey/dojo/blob/master/js/tag/widgets/DestroyWidget/templates/template.html

这是小部件模板中的html;

<div style="border: solid 1px pink">
<h3>${name}</h3>

<div dojoType="dijit.form.Button" data-dojo-attach-point="removeBtn" class="removeBtn">
  click me.
</div>

这是小部件中绑定处理程序的JavaScript;

define('tag/Widget', ['dojo', 'dojo/parser', 'dijit/_Widget', 'dijit/_TemplatedMixin'],

function(d, parser) {

return d.declare('tag.Widget', [dijit._Widget, dijit._TemplatedMixin], {

templateString : d.cache("tag", "/templates/template.html"),
widgetsInTemplate : true,
name : 'no name',
button : 'no button',

postCreate : function() {
  parser.parse(this.domNode);
  this.placeAt(d.byId('authorContainer'));
},

startup : function() {
  dijit.registry.forEach(dojo.hitch(this, function(w) {
    if (w.class === 'removeBtn') {
      this.button = w;
      return;
    }
  }))

  this.button.connect('onclick', function(evt) {
    console.log(evt.target);
  });
},

}）; }）;

这是控制台输出;

<input type="button" value="" class="dijitOffScreen" tabindex="-1" role="presentation" data-dojo-attach-point="valueNode">
<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_0_label" data-dojo-attach-point="containerNode">click me.</span>

Answer 1

我不确切地知道你为什么会遇到问题，但我认为你可能已经避免了它，如果你使用更多的“Dojo风格”做事方式而不是你当前使用类导航的“JQuery风格”： / p>

尝试使用新的data-dojo属性而不是旧的dojoType样式：
```
<div data-dojo-type="dijit.form.Button" class="remove">
```

使用显式附加点来引用内部小部件：

<div data-dojo-type="dijit.form.Button"
     data-dojo-attach-point="removeBtn"            
     class="remove">
    Click me
</div>

附加点将设置主窗口小部件的属性。您可以通过它访问按钮
```
dojo.connect(this.removeBtn, ...
```

使用onClick连接到小部件而不是onclick

dojo.connect(this.removeBtn, 'onClick', function(){ ... });

Answer 2

dijit.form.Button在其内部按钮输入上调度第二次单击事件。检查source。我不知道为什么。

我建议连接到widget's onClick event而不是DOM事件。 missingno的答案描述了设置。

Answer 3

使用data-dojo-attach-event为您自动连接处理程序。

在你的javascript中，添加一个你想在点击按钮时调用的函数：

// somewhere in your dojo.declare...
remove: function () {
    // do your remove stuff here
},

然后在你的模板中，你会得到一些这样的标记：

<div data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:remove">
    Remove
</div>

该标记的含义是您希望将按钮的onClick连接到拥有该模板的窗口小部件的remove功能。

作为奖励，此连接的管理是为您处理的，因此当您的窗口小部件被销毁时，您无需执行任何操作即可正确断开连接。如果您自己执行dojo.connect，那么您应该存储对dojo.connect返回的句柄的引用，并在您的窗口小部件被销毁时执行dojo.disconnect。

Answer 4

我在维修工作中遇到过这个问题..

我最终停止了事件传播：

clickFunction: function(e) {
    // business logic here...
    e.stopPropagation();
    window.event.cancelBubble = true; // IE
},

我相信我的模板（在玉中，对不起）是正确的：

button(data-dojo-type="dijit.form.ToggleButton",
       data-dojo-attach-event="onClick: clickFunction") Text

适合我！

dojo.dijit.Button两次触发onclick事件

4 个答案: