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

Question

我在自定义小部件中实例化 dijit 按钮。那一点都很好。在小部件代码中，我绑定(bind)了一个 onclick 事件处理程序，但是当我单击按钮时，事件会触发两次。第二个问题是它还将点击事件绑定(bind)到页面中与小部件无关的其他按钮。下面是我所拥有的简化版本。谁能告诉我为什么这样做。我花了最后几个小时试图修复它。

代码如下，但您也可以在此处查看

这是实例化自定义小部件的 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>

这是绑定(bind)处理程序的小部件内的 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 风格”，您可能会避免它:

尝试使用新的 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(){ ... });