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

我想对

div

标记内的

span

标记应用单击事件

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() }

      }]

现在在上面的例子中，当单击容器

class=“test”

，它进入onClick（）并按预期工作。但是，当单击span元素时，它仍然会转到

onClick（）

，而不是转到

onSpanClick（）

。 有没有办法区分不同元素的点击

---

谢谢

您可以在xtype上创建委托事件。请检查以下小提琴：

Ext.create（'Ext.DataView'{
renderTo:Ext.getBody（），
tpl：新Ext.XTemplate(
“Hello world span文本”
),
itemSelector:“div.test”，
听众：{
点击：{
元素：“el”，
代表：'div.test，span.icon gear'，
fn：功能（eopts）{
var getClassList=eopts.target.classList；
log（getClassList）；
if（getClassList.contains（'test'））{
警报（“单击测试div”）；
}else if（getClassList.contains（'icon-gear'））{
警报（“点击span”）；
}
}
}
}
});

您可以在xtype上创建委托事件。请检查以下小提琴：

Ext.create（'Ext.DataView'{
renderTo:Ext.getBody（），
tpl：新Ext.XTemplate(
“Hello world span文本”
),
itemSelector:“div.test”，
听众：{
点击：{
元素：“el”，
代表：'div.test，span.icon gear'，
fn：功能（eopts）{
var getClassList=eopts.target.classList；
log（getClassList）；
if（getClassList.contains（'test'））{
警报（“单击测试div”）；
}else if（getClassList.contains（'icon-gear'））{
警报（“点击span”）；
}
}
}
}
});

谢谢。。。它有助于甲烷。。。这对我有帮助

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

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

 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');
             }

         }
     }
 }
 });