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

Question

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

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

这是实例化自定义小部件的 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(){ ... });
   

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

为我工作！