javascript 如何将click处理程序应用于模板中的多个元素-EXTJS

ubbxdtey 于 5个月前发布在 Java

关注(0)|答案(1)|浏览(71)

我想在div标记中对span标记应用一个click事件。

items: [

        tpl: new Ext.XTemplate(
         '<div class="test"> Hello world<span class="icon-gear"></span></div>'
         ),
        listeners: {
          'afterrender': function(this) {
               this.el.on('click', this.onClick, this, { delegate: '.test' });
           },
           'click': function() { this.onSpanClick() }

      }]

字符串
下面是点击功能：

onClick: function (e) {
   //some stuff here
},

onSpanClick: function() {
 //some stuff here
}

型
现在在上面的例子中，当点击容器class="test"时，它进入onClick（）并按预期工作。但是当点击span元素时，它仍然进入onClick()而不是onSpanClick()。有没有办法区分来自不同元素的点击？
谢谢你，谢谢

JavaScript

来源：https://stackoverflow.com/questions/41110891/how-to-apply-click-handler-to-multiple-elements-inside-a-template-extjs

1条答案

按热度按时间

oiopk7p51#

你可以在你的xtype上创建delegate事件。请检查下面的fiddle：
https://fiddle.sencha.com/#view/editor&fiddle/1mcv

Ext.create('Ext.DataView', {
 renderTo: Ext.getBody(),
 tpl: new Ext.XTemplate(
     '<div class="test"> Hello world<span class="icon-gear"> span Text</span></div>'
 ),
 itemSelector: 'div.test',
 listeners: {
     click: {
         element: 'el',
         delegate: 'div.test,span.icon-gear',
         fn: function (eopts) {
             var getClassList = eopts.target.classList;
             console.log(getClassList);
             if (getClassList.contains('test')) {
                 alert('Clicked on Test div');
             } else if (getClassList.contains('icon-gear')) {
                 alert('Clicked on span');
             }

         }
     }
 }
 });

字符串

赞(0）回复(0）举报 5个月前

我来回答

javascript 如何将click处理程序应用于模板中的多个元素-EXTJS

1条答案

相关问题

热门标签

最新问答