button触发两次onclick事件

我正在自定义小部件中实例化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>

我不知道为什么你得到你的问题，但我认为你可能已经避免了它，如果你使用更多的"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(){ ... });

dijit.form。按钮在其内部按钮输入上调度第二个单击事件。检查来源。我不能告诉你为什么。

我建议连接到小部件的onClick事件而不是DOM事件。Missingno的回答描述了设置

使用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。

我一直在维修工作中遇到这个问题。

我已经结束了停止事件传播:

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

适合我!

相关内容

最新更新

热门标签：