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

         }
     }
 }
 });

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

1 个答案: