如何将点击处理程序应用于模板内的多个元素 -EXTJS

Question

我想将点击事件应用于span标签内的标签div。

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()。有没有办法区分来​​自不同元素的点击？

谢谢！

Answer 1

您可以在您的 xtype 上创建委托事件。请检查下面的小提琴：
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');
             }

         }
     }
 }
 });