点击事件在视野中不起作用

Question

请检查下面的代码,我做错了什么？我想在主体上点击事件时输出到控制台.

 Ext.define('iApp.view.LoginView', {
    extend: 'Ext.Panel',
    xtype: 'loginViewPanel',

    config: {
        style: "background-color: #3f3f3f;",
        html: 'hello world',
        listeners: {
            el: {
                tap: function() {
                    console.log('tapped');
                }
            }
        }
    }
});

没有输出到控制台......

Answer 1

您正在使用添加元素侦听器的旧版本.

如果你使用Sencha Touch 2 的compat版本,它会在控制台中给你一个警告,如下所示:

所以你的代码应该是这样的:

Ext.define('iApp.view.LoginView', {
    extend: 'Ext.Panel',
    xtype: 'loginViewPanel',

    config: {
        style: "background-color: #3f3f3f;",
        html: 'hello world',
        listeners: {
            tap: {
                element: 'element',
                fn: function() {
                    console.log('tapped');
                }
            }
        }
    }
});

您可以在Sencha论坛上找到有关更改的更多信息.

更新

如果要委托给项目的子项,则必须仍然定位element,然后在函数内检查tapped元素是否是您想要的元素:

var component = Ext.Viewport.add({
    width: 300,
    height: 300,
    style: 'background: red',
    html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
    listeners: {
        tap: {
            element: 'element',
            fn: function(e) {
                var element = Ext.get(e.target);
                if (element.id == "test") {
                    alert('tap!');
                }
            }
        }
    }
});