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

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风格":

1. 尝试使用新的data-dojo属性而不是旧的dojoType样式:

   <div data-dojo-type="dijit.form.Button" class="remove">
   

2. 使用显式附加点来引用内部小部件:

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

3. 附加点将设置主窗口小部件的属性.您可以通过它访问该按钮

   dojo.connect(this.removeBtn, ...
   

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

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