Javascript 如何处理dataview中项目的鼠标单击

“我的数据视图”中的每个项目都有一个文本和一个表示按钮的div。该按钮仅在鼠标位于项目上方时显示。如何处理按钮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);
    }
}

xtype:'dataview'，
存储：Ext.create（'Ext.data.store'{
型号：'LogEntry'，
数据：[
{文本：'项目1'}，
{文本：'项目2'}，
{文本：'项目3'}，
{文本：'项目4'}，
{文本：'项目5'}
]
}),
tpl:Ext.create（'Ext.XTemplate'，
'',
'',
“{text}”，
'',
'',
''
),
itemSelector:'div.logentry'，
跟踪：是的，
overItemCls:'日志条目悬停'，
听众：{
“itemclick”：函数（视图、记录、项、idx、事件、选项）{
//在这里，我如何区分是单击了delete div还是dataview条目的其他部分？
console.warn（'此项代表整行：'，项）；
}
}

工作示例：

问题是，我无法在itemclick处理程序中区分是否单击了按钮div或文本范围。

谢谢并致以最良好的问候，

---

Mik

检查事件侦听器中的

事件.target.className

。以下是一个工作示例：

代码如下：

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

Ext.onReady（函数（）{
Ext.define（'LogEntry'{
扩展：“Ext.data.Model”，
字段：[
{name:'text'，键入：'string'}
]
});
Ext.create（'Ext.panel.panel'{
宽度：500，
身高：300，
renderTo:Ext.getBody（），
布局：“适合”，
项目：[{
xtype:“数据视图”，
存储：Ext.create（'Ext.data.store'{
型号：'LogEntry'，
数据：[
{文本：'项目1'}，
{文本：'项目2'}，
{文本：'项目3'}，
{文本：'项目4'}，
{文本：'项目5'}
]
}),
tpl:Ext.create（'Ext.XTemplate'，
'',
'',
“{text}”，
'',
'',
''
),
itemSelector:'div.logentry'，
跟踪：是的，
overItemCls:'日志条目悬停'，
听众：{
“itemclick”：函数（视图、记录、项、idx、事件、选项）{
如果（event.target.className=='removecon'）{
警报（“您单击了x图标”）；
}
//在这里，我如何区分是单击了delete div还是dataview条目的其他部分？
console.warn（'此项代表整行：'，项）；
}
}
}]
});
});

完美！正是我要找的@Neil McGuigan我从来没有深入探究过这件事。这真是太好了！