javascript-如何处理dataview内部项目的mouseclicks

我的数据视图中的每个项目都有一个文本和一个div,代表一个按钮.仅当鼠标悬停在项目上方时,该按钮才会显示.我该如何处理button-div上的鼠标单击？
我到目前为止所拥有的是：

xtype: 'dataview',

store: Ext.create('Ext.data.Store', {
    model: 'LogEntry',
    data: [
        { text: 'item 1' },
        { text: 'item 2' },
        { text: 'item 3' },
        { text: 'item 4' },
        { text: 'item 5' }
    ]
}),

tpl: Ext.create('Ext.XTemplate',
    '<tpl for=".">',
        '<div class="logentry">',
            '<span>{text}</span>',
            '<div class="removeicon"></div>',
        '</div>',
    '</tpl>'
),

itemSelector: 'div.logentry',
trackOver: true,
overItemCls: 'logentry-hover',

listeners: {
    'itemclick': function(view, record, item, idx, event, opts) {
        // How can i distinguish here if the delete-div has been clicked or some other part of the dataview-entry?
        console.warn('This item respresents the whole row:', item);
    }
}

工作示例：http://jsfiddle.net/suamikim/3ZNTA/

问题是,如果单击了按钮div或文本跨度,我无法在itemclick-handler中进行区分.
谢谢&最好的祝福,
米克

解决方法:

在事件监听器中检查event.target.className.这是一个工作示例：

http://jsfiddle.net/3ZNTA/1/

这是代码：

Ext.onReady(function() {
    Ext.define('LogEntry', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'text',    type: 'string' }
        ]
    });

    Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),

        layout: 'fit',

        items: [{
            xtype: 'dataview',

            store: Ext.create('Ext.data.Store', {
                model: 'LogEntry',
                data: [
                    { text: 'item 1' },
                    { text: 'item 2' },
                    { text: 'item 3' },
                    { text: 'item 4' },
                    { text: 'item 5' }
                ]
            }),

            tpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                    '<div class="logentry">',
                        '<span>{text}</span>',
                        '<div class="removeicon"></div>',
                    '</div>',
                '</tpl>'
            ),

            itemSelector: 'div.logentry',
            trackOver: true,
            overItemCls: 'logentry-hover',

            listeners: {
                'itemclick': function(view, record, item, idx, event, opts) {

                    if(event.target.className === 'removeicon'){
                        alert('you clicked the x icon');
                    }

                    // How can i distinguish here if the delete-div has been clicked or some other part of the dataview-entry?
                    console.warn('This item respresents the whole row:', item);
                }
            }
        }]
    });
});

标签：dataview,extjs,extjs4,javascript
来源： https://codeday.me/bug/20191031/1979464.html