DOM 事件和煎茶事件之间的事件顺序

Question

我有一个数据视图，用 extjs 7.1 modern tookit 编写，模板带有 anchor 标签 和 select 事件：

https://fiddle.sencha.com/#view/editor&fiddle/34bd

Ext.create({
    renderTo: document.body,

    xtype: 'list',
    itemTpl: '<div class="contact"><a onclick="event.preventDefault();console.log(\'link\');" href="{firstName}">{firstName}</a> <b>{lastName}</b></div>',

    store: {

        data: [{
            firstName: 'Peter',
            lastName: 'Venkman'
        }, {
            firstName: 'Raymond',
            lastName: 'Stantz'
        }, {
            firstName: 'Egon',
            lastName: 'Spengler'
        }, {
            firstName: 'Winston',
            lastName: 'Zeddemore'
        }]
    },
    listeners: {
        select() { console.log('select'); }
    }
});

我预计 link 事件将在列表 select 事件之前触发，但恰恰相反，最糟糕的是两个事件都会一个接一个地触发。

Answer 1

列表的 onItemDisclosure 属性而不是 link 怎么样？

使用 onItemDisclosure 函数和 select 侦听器来分隔两个动作。

onItemDisclosure : Boolean / Function / String / Object BINDABLE

Set to true to display a disclosure icon on each list item. The list will then fire the disclose event, and the event can be stopped before childtap. By setting this config to a function, the function passed will be called when the disclosure is tapped. This can be either a function object or the name of a Ext.app.ViewController method.

Finally you can specify an object with a scope and handler property defined. This will also be bound to the tap event listener and is useful when you want to change the scope of the handler.

xtype: 'list',
itemTpl: [
    '<div class="contact">',
    '<b>',
    '{firstName} {lastName}',
    '</b>',
    '</div>'
],
onItemDisclosure: function (record, btn, index) {
    console.log('Disclosure');
    Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('firstName'), Ext.emptyFn);
},
store: {

    data: [{
        firstName: 'Peter',
        lastName: 'Venkman'
    }, {
        firstName: 'Raymond',
        lastName: 'Stantz'
    }, {
        firstName: 'Egon',
        lastName: 'Spengler'
    }, {
        firstName: 'Winston',
        lastName: 'Zeddemore'
    }]
},
listeners: {
        select() {
            console.log('select');
        }
}

这里是fiddle例子

Answer 2

I'm trying to understand where the user clicks as you suggest but I don't know how.

正如@LightNight 所说，您可以在 select 之前使用 childtap 事件来运行需要的处理程序。如果您想了解点击发生的位置 - 只需使用 event.target。看看我的 example

DOM 事件和煎茶事件之间的事件顺序

Events order between DOM event and sencha event

javascript

extjs

extjs7