微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

dojo.dijit.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(){ ... });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐